Question

这是我尝试实现的滑块类型，但似乎找不到这样的设置。第一张图片将与第一张图片一样，其余图片则是房屋的不同图片。

这是我到目前为止的内容：HTML

<div class="detailed-gallery">
        <div class="arrow-left">
            <div class="arrow-left-small">
            </div>
        </div>
        <div class="detailed-gallery-outer">
            <div class="detailed-gallery-inner">
                <div class="detailed-gallery-tmb">
                    <img src="images/office1.jpg" alt="Executive1" height="auto" width="350"/>
                </div>
                <div class="detailed-gallery-tmb">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2686.201067203608!2d17.6327019!3d47.680515!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476bbff067c5bc01%3A0x5614666fbf541a35!2zS8OhbHbDoXJpYSB1LiAxLCBHecWRciwgOTAyNA!5e0!3m2!1sen!2shu!4v1415616034067" width="300" height="200" frameborder="0" style="border:0"></iframe>
                </div>
                <div class="detailed-gallery-tmb">
                    <img src="images/office2.jpg" alt="Executive3" height="250" width="250"/>
                </div>
                <div class="detailed-gallery-tmb">
                    <img src="images/office3.jpg" alt="Executive4" height="250" width="250"/>
                </div>
                <div class="detailed-gallery-tmb">
                    <img src="images/office4.jpg" alt="Executive5" height="250" width="250"/>
                </div>
                <div class="detailed-gallery-tmb">
                    <img src="images/office5.jpg" alt="Executive6" height="250" width="250"/>
                </div>
                <div class="detailed-gallery-tmb">
                    <img src="images/office5.jpg" alt="Executive7" height="250" width="250"/>
                </div>
            </div>
        </div>
        <div class="arrow-right">
            <div class="arrow-right-small">
            </div>
        </div>
    </div>

我的第一个问题是如何在底部获得图像的第二部分。

.detailed-gallery-outer {
        overflow: hidden;
        width: 100%;
    }

    .detailed-gallery-inner {
        float: left;
        position: relative;
        width: 3390px;
    }

    .detailed-gallery-tmb {
        float: left;
        margin: 0 10px 0 0;

    }

    .detailed-gallery {
        display: flex;
        justify-content: space-between;
        padding: 0;
        position: relative;
        width: 1140px;
        margin: 0 auto;
    }

    .arrow-left {
        background: #FFFFFF;
        opacity: 0.5;
        cursor: pointer;
        color: ##d1d1d1;
        height: 82px;
        width: 0px;
        align-self: center;
        z-index: 99!important;
    }

    .arrow-right {
        background:#FFFFFF;
        opacity: 0.5;
        color: #d1d1d1;
        cursor: pointer;
        height: 82px;
        width: 0px;
        align-self: center;
    }

    .arrow-left-small { 
        padding: 18px;
        box-shadow: 4px -4px 0 1px black;
        position: relative;
        display: inline-block;
        margin: 40px;
        transform: rotate(225deg);
        right: 20px;
        top:-9px;
    }

    .arrow-right-small {
        padding: 18px;
        box-shadow: 4px -4px 0 1px black;
        position: relative;
        display: inline-block;
        margin: 40px;
        transform: rotate(45deg);
        right: 90px;
        top:-9px;
    }

Answer 1

立即查看。我已经用完了猫头鹰轮播。

 $(document).ready(function() {
  $('.custom-slider').owlCarousel({
    margin: 15,
    autoplay: true,
    dots: true,
    loop: false,
    
    
    navText: ['<button type="button" class="btn slider-left-btn"><</button>', '<button type="button" class="btn slider-right-btn">></button>'],
    nav: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
  });
});

.detailed-gallery .owl-carousel .item {
    height: auto;
    background: #4DC7A0;
    padding: 13px;
    min-height: 450px;
}
.detailed-gallery .owl-carousel .item .item-top{padding-bottom: 20px;}

<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="detailed-gallery">
                <div class="owl-carousel owl-theme custom-slider">
                    <div class="item">
                      <div class="item-single"><img src="https://via.placeholder.com/200x420"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-single"><img src="https://via.placeholder.com/200x420"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                    <div class="item">
                      <div class="item-top"><img src="https://via.placeholder.com/200x200"></div>
                      <div class="item-bottom"><img src="https://via.placeholder.com/200x200"></div>
                    </div>
                </div>
             </div>   
        </div>
    </div>
</div>    
</html>

尝试实现这种类型的滑块

1 个答案: