JQuery：添加到 Blogger HTML/Javascript 小工具时代码未运行

debugcn 发表于 Dev

Jquery新手

我一直在尝试为我的博主添加一个滑块（照片和文字）。我将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>

斯帕什

<!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>