I am trying to make a Responsive Testimonial HTML File. It works on codepen (link is Here ) and is working nicely. When I transferred it on sublimetext, it doesn't seem to work. I believe it is due to the placement of my < script > codes. As we all know, the format of codepen is different from that of an actual code. Can someone tell me where I went wrong? I am confused on how to import or declare external JS links and the positioning. Thanks in advance
Here is what I made (UPDATE, I removed the main.js and saved it separately, and called it out. I believe the format is vendor first then the main.js)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Testimonials</title>
<link rel="stylesheet" href="css/styles.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/boostrap.min.css" rel="stylesheet"/>
<link href="css/owl.carousel.min.css" rel="stylesheet"/>
<link href="css/animate.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<section>
<div class="customer-feedback">
<div class="container text-center">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div>
<h2 class="section-title">What Clients Say</h2>
</div>
</div><!-- /End col -->
</div><!-- /End row -->
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="feedback-slider">
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/8/7310/buddyicons/24846422@N06_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Lisa Redfern</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Cassi</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="4">
4
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Md Nahidul</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
</div><!-- /End feedback-slider -->
<!-- side thumbnail -->
<div class="feedback-slider-thumb hidden-xs">
<div class="thumb-prev">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
5
<i class="fa fa-star"></i>
</span>
</div>
<div class="thumb-next">
<span>
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138@N07_r.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
4
<i class="fa fa-star"></i>
</span>
</div>
</div>
<!-- /side thumbnail -->
</div><!-- /End col -->
</div><!-- /End row -->
</div><!-- /End container -->
</div><!-- /End customer-feedback -->
</section>
</body>
</html>
JAVASCRIPT main.js
jQuery(document).ready(function($) {
var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
items: 1,
nav: true,
dots: true,
autoplay: true,
loop: true,
mouseDrag: true,
touchDrag: true,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
responsive:{
// breakpoint from 767 up
767:{
nav: true,
dots: false
}
}
});
feedbackSlider.on("translate.owl.carousel", function(){
$(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});
feedbackSlider.on("translated.owl.carousel", function(){
$(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});
feedbackSlider.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
$('.thumb-prev').find('img').attr('src', prevThumb);
$('.thumb-next').find('img').attr('src', nextThumb);
$('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
$('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
});
$('.thumb-next').on('click', function() {
feedbackSlider.trigger('next.owl.carousel', [300]);
return false;
});
$('.thumb-prev').on('click', function() {
feedbackSlider.trigger('prev.owl.carousel', [300]);
return false;
});
}); //end ready
Below is the OUTPUT that is showing our what I have right now. I believe it has something to do on how I declare the css and js external codes My Current Output
<script type="text/javascript" scr="js/main.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.