想要生成带有猫头鹰图像的旋转木马

I want a hidden div on owl carousel. Please Help me . i am calling all css file from owl carousel . Here is my calling css file

我想在猫头鹰旋转木马上隐藏div。请帮我。我正在调用owl carousel的所有css文件。这是我的调用css文件

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.css">

/owl-carousel/owl.theme.css"> /owl-carousel/owl.transitions.css">

Here is my calling JS file

这是我的调用JS文件

<script src="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.min.js"></script>

/owl-carousel/active.js">

and i get up my HTML source file

然后我启动了我的HTML源文件

    <div id="owl-demo" class="owl-carousel">
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
  <div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
</div>

1 个解决方案

#1

Html Code Making use of slick.js

Html代码使用slick.js

<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <script src="app2.js"></script>
    <style>
    body {
    background-color: lightblue;
   }
   #slickslide {
       height: 200px;
       background: lightgray;
     }
     #content {
         margin: auto;
         padding: 20px;
         width: 80%;
     }

    </style>
</head>
<body>

  <div id="demo"></div>
<div id=content>  
  <div id="slickslide" slick="">
    <div><h1>Test1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test4</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test5</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
  </div>
</div>
</body>
</html>

Javascript code

$(document).ready(function(){
     $('#slickslide').slick({
         dots: true,
         infinite: true,
         speed: 300,
         autoplay:true,
         autoplaySpeed: 1000,
         slidesToShow: 1,
         slidesToScroll: 1
     });
 });

#1

Html Code Making use of slick.js

Html代码使用slick.js

<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    <script src="app2.js"></script>
    <style>
    body {
    background-color: lightblue;
   }
   #slickslide {
       height: 200px;
       background: lightgray;
     }
     #content {
         margin: auto;
         padding: 20px;
         width: 80%;
     }

    </style>
</head>
<body>

  <div id="demo"></div>
<div id=content>  
  <div id="slickslide" slick="">
    <div><h1>Test1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test4</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
    <div><h1>Test5</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
  </div>
</div>
</body>
</html>

Javascript code

$(document).ready(function(){
     $('#slickslide').slick({
         dots: true,
         infinite: true,
         speed: 300,
         autoplay:true,
         autoplaySpeed: 1000,
         slidesToShow: 1,
         slidesToScroll: 1
     });
 });

秒客网

想要生成带有猫头鹰图像的旋转木马

1 个解决方案

#1

#1

相关文章