Блог

Главная - Вопросы по программированию - Как создать слайдер продукта в bootstrap

Как создать слайдер продукта в bootstrap

#jquery #html #css #twitter-bootstrap

#jquery #HTML #css #twitter-bootstrap

Вопрос:

Как создать слайдер продукта в bootstrap, подобный тому, что на изображении ниже, который показывает большое изображение слева с деталями справа над слайдером миниатюр.

Я хочу внести одну модификацию в следующее изображение. Я хочу иметь слайдер миниатюр под большим изображением, на котором показаны другие изображения того же продукта, но слайдер миниатюр справа должен перейти к следующему продукту.

Слайдер продукта

мои HTML-коды

 <div class="pull"></div>
  <div class="container">
  <div class="content">
    <div class ="row">
    <li id="product">
    <div class="pad"> 
        <div class ="col-xs-12 col-md-6">
                <div class="col1">
                  <div class="gallery_big_img">
                    <img src="images/doubleRound/all parts.JPG" alt="" class="img1" id="active">
                    <img src="images/doubleRound/bottom.JPG" alt="" class="img2">
                    <img src="images/doubleRound/front_side.JPG" alt="" class="img3">
                    <img src="images/doubleRound/front.JPG" alt="" class="img4">
                    <img src="images/doubleRound/top.JPG" alt="" class="img5">
                    <img src="images/singleRound/all parts.JPG" alt="" class="img6">
                    <img src="images/singleRound/down.JPG" alt="" class="img7">
                    <img src="images/singleRound/front.JPG" alt="" class="img8">
                    <img src="images/singleRound/front_side.JPG" alt="" class="img9">
                    <img src="images/singleRound/top_back.JPG" alt="" class="img10">
                  </div>
                </div>
        <div class ="col-md-12 col-md-6">
          <div class="col1 pad_left1">
                  <h2>Products</h2>
                  <div id="caption">
                    <ul>
                      <li class="img1">
                        <p class="pad_bot1"><strong>Double Shape All Parts</strong><br>
                            Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Danctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img2">
                        <p class="pad_bot1"><strong>Double Round Bottom</strong><br>
                            Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img3">
                        <p class="pad_bot1"><strong>Double Round Front Side</strong><br>
                            Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img4">
                        <p class="pad_bot1"><strong>Double Round Front</strong><br>
                            Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img5">
                        <p class="pad_bot1"><strong>Double Round Top</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img6">
                        <p class="pad_bot1"><strong>Signle Round All Parts</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img7">
                        <p class="pad_bot1"><strong>Signle Round Down</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img8">
                        <p class="pad_bot1"><strong>Signle Round Front</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img9">
                        <p class="pad_bot1"><strong>Signle Round Front Side</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                      <li class="img10">
                        <p class="pad_bot1"><strong>Signle Round Top Back</strong><br>
                            Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
                        <p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
                      </li>
                    </ul>
                  </div>
                  <div class="relative">
                    <div id="gallery1" class="small_img">
                      <ul>
                      <li><a href="#img1"><img src="images/doubleRound/all parts.JPG" alt=""></a></li>
                      <li><a href="#img2"><img src="images/doubleRound/bottom.JPG" alt=""></a></li>
                      <li><a href="#img3"><img src="images/doubleRound/front_side.JPG" alt=""></a></li>
                      <li><a href="#img4"><img src="images/doubleRound/front.JPG" alt=""></a></li>
                      <li><a href="#img5"><img src="images/doubleRound/top.JPG" alt=""></a></li>
                                            <li><a href="#img6"><img src="images/singleRound/all parts.JPG" alt=""></a></li>
                      <li><a href="#img7"><img src="images/singleRound/down.JPG" alt=""></a></li>
                      <li><a href="#img8"><img src="images/singleRound/front.JPG" alt=""></a></li>
                      <li><a href="#img9"><img src="images/singleRound/front_side.JPG" alt=""></a></li>
                      <li><a href="#img10"><img src="images/singleRound/top_back.JPG" alt=""></a></li>
                      </ul>
                    </div>
                    <a href="#" class="prev"><span></span></a>
                    <a href="#" class="next"><span></span></a>
                  </div>
                </div>
        </div>

        </div>
        </li>
    </div>
    </div>
  </div>

но приведенный выше код не работает

Ответ №1:

На самом деле это очень просто сделать в Bootstrap без каких-либо дополнительных плагинов или даже одной строки javascript.

Вот ДЕМОНСТРАЦИЯ

Вот базовый макет, который примерно соответствует вашему дизайну. Оформите его так, как вы хотите. Это использует преимущества параметров Bootstrap data-target и data-slide-to. Целевой объект данных — это идентификатор вашей карусели, а data-slide-to — это просто число, представляющее слайд (которое основано на 0, поэтому для слайда 1 установлено значение data-slide-to=»0″).

 <div class="container">
  <div class="row">
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/350x250/e8117f/fffamp;text=Product Main">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/00ffff/000amp;text=Product Image 2">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ff00ff/fffamp;text=Product Image 3">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ffff00/000amp;text=Product Image 4">
                </div>
            </div>
            <div class="clearfix">
              <div class="carousel-link">
                <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fffamp;text=Product Main"></div>
                <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000amp;text=Product Image 2"></div>
                <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fffamp;text=Product Image 3"></div>
                <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000amp;text=Product Image 4"></div>
              </div>
            </div>
        </div> 
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <h2>Products</h2>
        <h3>Some product subhead</h3>
        <p>Product description goes here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
        <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
    </div> <!-- /col-sm-6 -->
  </div> <!-- /row -->
</div> <!-- /container -->

и вот несколько дополнительных стилей для уменьшенных изображений, которые используются для переключения карусели.

 .carousel-link .thumb {
    width: 25%;
    cursor: pointer;
    float: left;
}
.carousel-link .thumb img {
    width: 100%;
    padding: 2px;
}
.carousel-link .thumb:first-of-type img {
    padding-left: 0;
}
.carousel-link .thumb:last-of-type img {
    padding-right: 0;
}
.item img {
    width: 100%;    
}

Ответ №2:

Вау, довольно круто. Все приведенные выше ответы потрясающие. Мне действительно нужен был слайдер содержимого для Bootstrap 5 моего проекта. Итак, вот что я придумал.

По сути, я использовал jQuery и Light slider для выполнения своей работы.

 <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
        <title>Hello, world!</title>
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="main-header mt-5">
                    <h1 class="fs-4">Content Slider for Bootstrap 5</h1>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <ul id="card-slider">
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card">
                        <img src="https://placehold.co/600x300" alt="Card Title">
                        <div class="card-body">
                            <h3 class="fs-6">Card Title</h3>
                            <p class="small">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#card-slider').lightSlider();
        });
    </script>
  </body>
</html>