最初,flexslider和owlcarousel都是通过即兴操作而工作的,但是在按照网站上的实际说明使代码更清洁之后,滑块停止了工作。但是,通常不会显示任何滑块。而且,“ block_row”中的图标从并排,并排变为彼此下方。如何使滑块出现?
<!DOCTYPE html>
<html>
<head>
<link href="html/assets/css/style1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="html/assets/Slider/Slider/flexslider.css" type="text/css">
<link rel="stylesheet" href="html/assets/Carousel/dist/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="html/assets/Carousel/dist/assets/owl.theme.default.min.css">
<script src="html/assets/Slider/Slider/bower_components/jquery/dist/jquery.min.js"></script>
<script src="html/assets/Slider/Slider/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<body>
<section class="banner">
<div class="flexslider">
<ul class="slides">
<li>
<img src="html/assets/images/building.png">
</li>
<li>
<img src="html/assets/images/building.png">
</li>
<li>
<img src="html/assets/images/building.png">
</li>
<li>
<img src="html/assets/images/building.png">
</li>
</ul>
</div>
</section>
<section id="block-row">
<div class="wrap">
<div class="block1">
<code><img src="html/assets/images/pers.png" alt=""></code>
<span>ABOUT</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="block1">
<code><img src="html/assets/images/shield.png" alt=""></code>
<span>ABOUT</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="block1">
<code><img src="html/assets/images/globe.png" alt=""></code>
<span>ABOUT</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="block1">
<code><img src="html/assets/images/cog.png" alt=""></code>
<span>ABOUT</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
</section>
<section id="gallery">
<div class="wrap">
<div id="gallery-title">RESPONSIVE GALLERY</div>
<div class="owl-carousel owl-theme">
<div class="block2">
<code><img src="html/assets/images/buildinggain.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/bed.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/trees.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/man.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/buildinggain.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/bed.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images/man.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="block2">
<code><img src="html/assets/images//man.png" alt=""></code>
<span>Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</section>
<footer>
<span> Copyright 2018, Company Name. All Rights Reserved </span>
<ul>
<li> Home </li>
<li>About Us</li>
<li>Project</li>
<li>Software</li>
<li>Contact Us</li>
</ul>
</footer>
<script src="html/assets/Carousel/docs/assets/vendors/jquery.min.js"></script>
<script src="html/assets/Carousel/dist/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
})
</script>
</body>
</html>