网站链接:https://tomspink.co.uk/portfolio-lovevelo
当点击滑块时,图像会加载,我不知道为什么它们没有加载进行加载。我正在使用猫头鹰幻灯片:https://owlcarousel2.github.io/OwlCarousel2/
任何帮助都会很棒! :)
.owl-carousel .owl-pagination {
text-align: center;
}
.owl-carousel .owl-pagination .owl-page {
border-radius: 8px;
width: 8px;
height: 8px;
display: inline-block;
margin: 0 4px;
position: relative;
background: rgba(255, 255, 255, .7);
display: inline-block;
overflow: hidden;
height: 6px;
width: 6px;
margin: 6px 4px;
text-indent: -200%;
z-index: 1000;
border-radius: 6px;
box-shadow: 0 0 1px rgba(17, 17, 17, .4);
transition: all .3s cubic-bezier(0, 0, .58, 1);
}
.owl-carousel .owl-pagination .owl-page.active {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.image-slider {
position: relative;
}
.image-slider img {
width: 100%;
}
.image-slider.owl-carousel .owl-prev,
.image-slider.owl-carousel .owl-next {
background: rgba(0, 0, 0, .1);
position: absolute;
border-radius: 8px;
height: 50px;
width: 50px;
top: 50%;
margin-top: -25px;
text-align: center;
line-height: 50px;
font-size: 16px;
display: block;
color: #fff;
transition: .2s linear;
}
.image-slider.owl-carousel .owl-prev:hover,
.image-slider.owl-carousel .owl-next:hover {
background: rgba(0, 0, 0, .3);
}
.image-slider.owl-carousel .owl-prev {
left: 15px;
}
.image-slider.owl-carousel .owl-next {
right: 15px;
}
.image-slider .owl-pagination {
margin-top: -28px;
}
.image-slider .owl-dots {
margin-top: 20px;
}
.tms-slides {
text-align: center;
}
.tms-slides .tms-icons h2 {
line-height: 1;
font-size: 32px;
margin: 0 0 20px;
}
.tms-slides blockquote {
border: 0;
line-height: 1.8;
font-size: 22px;
padding: 20px 0;
margin: 0;
}
<section class="module portfolio-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-content">
<div class="gallery">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Intro-Artwork-1920x1280-2.jpg" alt=""></div>
<figcaption class="gallery-caption">KWD Chartered Surveyors</figcaption>
</figure>
</div>
<div class="portfolio-content">
<div class="image-slider owl-carousel fadeOut">
<img src="assets/images/portfolio/LV-carousel-mac-wtr.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-gall.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-404.jpg" alt="">
<img src="assets/images/portfolio/LV-carousel-mac-about.jpg" alt="">
</div>
</div>
<div class="gallery gallery-columns-2">
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Letter-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business card</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-icon"><img src="assets/images/portfolio/LV-Business-card-1920.jpg" alt=""></div>
<figcaption class="gallery-caption">Business Card & Letterhead</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Aenean vitae bibendum erat。 Maecenas lobortis libero sed pellentesque aliquam。 Morbi non rhoncus nulla,volutpat bibendum sem。 Vestibulum sed justo in lorem vulputate ullamcorper。 Sed sollicitudin felis是一个迷人的偶像。 Maecenas luctus,非前庭效率,neque urna faucibus justo,在porta massa magna id ex。 Duis ac eleifend odio。 Pellentesque id metus pharetra,lobortis massa a,porttitor nisi。 Aliquam erat volutpat。 Nullam nibh nulla,porta ac orci sit amet,accumsan porta sem。 Cras pharetra,lectus et semper gravida,ligula sem posuere orci,id tincidunt risus sapien non leo。 Quisque ac aliquet nisi。 Nam placerat tempus leo,非dictum dui vestibulum vel。