I've been trying to add a slider (photo and text) to my blogger. I added the code from https://codepen.io/shamim539/pen/GNqLda) into my blogger html/javascript gadget but it doesn't seem to work. The images and text appear in individual images and text in a column, instead of how the slider was supposed to work.
What I used:
<!-- 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>owl carousel 2 testimonial slider example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<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/OwlCarousel2/2.1.1/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.testimonials {
background-color: #f33f02;
position: relative;
padding-top: 80px;
}
.testimonials:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 30%;
background-color: #ddd;
}
#customers-testimonials .item-details {
background-color: #333333;
color: #fff;
padding: 20px 10px;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 15px;
font-size: 18px;
line-height: 18px;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 20px;
}
#customers-testimonials .item-details p {
font-size: 14px;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 80px;
}
.owl-carousel .owl-nav [class*='owl-'] {
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: #fff;
border: 1px solid #ddd;
text-align: center;
}
.owl-carousel .owl-prev {
left: -70px;
}
.owl-carousel .owl-next {
right: -70px;
}
</style>
</head>
<body>
<!-- TESTIMONIALS -->
<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/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></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 <span>$21</span></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/top-view-of-tasty-noodles-with-prawns_1203-1769.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<!--TESTIMONIAL 4 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/burguer-with-garnish_1088-72.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 4 -->
<!--TESTIMONIAL 5 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/delicious-pastry-with-chicken_1203-1616.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 5 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'></script>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true,
center: true,
items: 3,
margin: 30,
autoplay: true,
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>
</body>
</html>