JQuery: Code not running when added to Blogger HTML/Javascript gadget
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.
Hope someone can help. 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>
javascript jquery html css blogger
add a comment |
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.
Hope someone can help. 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>
javascript jquery html css blogger
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34
add a comment |
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.
Hope someone can help. 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>
javascript jquery html css blogger
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.
Hope someone can help. 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>
javascript jquery html css blogger
javascript jquery html css blogger
edited Dec 29 '18 at 13:30
JqueryNewbie
asked Dec 29 '18 at 10:43
JqueryNewbieJqueryNewbie
60138
60138
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34
add a comment |
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34
add a comment |
1 Answer
1
active
oldest
votes
<!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>
- The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here. - You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
- Please take the tour and learn how to ask a good question. Thank you :)
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53968798%2fjquery-code-not-running-when-added-to-blogger-html-javascript-gadget%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
<!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>
- The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here. - You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
- Please take the tour and learn how to ask a good question. Thank you :)
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
add a comment |
<!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>
- The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here. - You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
- Please take the tour and learn how to ask a good question. Thank you :)
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
add a comment |
<!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>
- The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here. - You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
- Please take the tour and learn how to ask a good question. Thank you :)
<!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>
- The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here. - You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
- Please take the tour and learn how to ask a good question. Thank you :)
edited Dec 29 '18 at 13:02
answered Dec 29 '18 at 12:04
SparshSparsh
805622
805622
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
add a comment |
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
Thank you, it is working now (:
– JqueryNewbie
Dec 29 '18 at 12:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53968798%2fjquery-code-not-running-when-added-to-blogger-html-javascript-gadget%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please provide a full code snippet. Your question is too vague to determine why it’s not working with the small code you provided
– Flightdoc5242
Dec 29 '18 at 10:46
Please take the tour and learn how to ask a good question. "Didn't work" is not a clear problem statement, and your question should include a Minimal, Complete, and Verifiable example in the question itself.
– Quentin
Dec 29 '18 at 10:47
Sorry all, I've updated the post.
– JqueryNewbie
Dec 29 '18 at 12:34