Я пытаюсь добавить слайдер (фото и текст) в свой блоггер.Я добавил код из https://codepen.io/shamim539/pen/GNqLda) в свой гаджет html / javascript для блогов, но, похоже, он не работает.Изображения и текст отображаются в виде отдельных изображений и текста в столбце вместо того, как должен был работать ползунок.
Надеюсь, что кто-то может помочь.Что я использовал:
<!-- BLOG POSTS -->
<section class="testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<style>
.testimonials{ position: relative; padding-top: 10px; }
#customers-testimonials{
.item-details{
background-color: #F7F6F6;
color: #4A4A51;
padding: 1.5em 1.5em;
text-align: left;
h5{
margin: 0 0 0.2em;
font-size: 1.5em;
line-height: 1.2em;
span{
color: red;
float: right;
padding-right: 0.2em;
}
}
p{ font-size: 1em; }
}
.item {
text-align: center;
margin-bottom:10px;
}
}
.owl-carousel .owl-nav [class*='owl-'] {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next, .owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #eee;
border: 1px solid #eee;
text-align: center;
}
.owl-carousel .owl-prev {
left: 20px;
}
.owl-carousel .owl-next {
right: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type='text/javascript'/>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true;
center: true;
items: 3;
margin: 10;
autoplay: false;
dots:true;
nav:true;
autoplayTimeout: 8500;
smartSpeed: 450;
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
responsive: {
0: { items: 1; };
768: { items: 2; };
1170: { items: 3; };
}
});
});
</script>