Skip to main content

Owl Slider JQuery

Create Owl Slider 


 <!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<style type="text/css">
#owl-demo .item{
  background: #42bdc2;
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
</style>
</head>
<body>
<h1> Hello </h1>
<div id="moodSlider" class="owl-carousel owl-theme">
          
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>

</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js" ></script>
<script type="text/javascript">

$(document).ready(function() {

$('#moodSlider').owlCarousel({
        loop: true,
        margin: 40,
        nav: false,
        items: 5,
        
        smartSpeed:1000,
        autoplay:true,
autoplayTimeout: 500,
 //autoplaySpeed: 1000, //Set AutoPlay to 3 seconds
        dots:false,
        //autoPlay: 3000, //Set AutoPlay to 3 seconds
        responsive:{ 
        0:{
          items:2,
 nav: true
        },
        767:{ 
          items:3,
 nav: true
        },
        970:{
          items:5,
 nav: true
        }
      }
    });

});
</script>
</html>

Comments

Post a Comment

Popular posts from this blog

High light Search Result In Wordpress

High light Search Result In Wordpress add this function in your themes function.php function highlight_results ( $ text ) {      if ( is_search ( ) ) { $ keys = implode ( '|' , explode ( ' ' , get_search_query ( ) ) ) ; $ text = preg_replace ( '/(' . $ keys . ')/iu' , '<span class="search-highlight">\0</span>' , $ text ) ;      }      return $ text ; } add_filter ( 'the_content' , 'highlight_results' ) ; add_filter ( 'the_excerpt' , 'highlight_results' ) ; add_filter ( 'the_title' , 'highlight_results' ) ;   function highlight_results_css ( ) { ? > <style> .search-highlight { background-color : #FF0 ; font-weight : bold ; } </style> < ? php } add_action ( 'wp_head' , 'highlight_results_css' ) ;
5 comments
Read more

Redirect In contact form 7

add_action( 'wp_footer' , 'redirect_cf7' ); function redirect_cf7() { ?> < script type = "text/javascript" > document.addEventListener( 'wpcf7mailsent' , function ( event ) { if ( '1377' == event.detail.contactFormId ) { // Sends sumissions on form 947 to the first thank you page location = 'https://www.panelesyceldassolares.com/regreso' ; } else { // Sends submissions on all unaccounted for forms to the third thank you page location = 'https://www.panelesyceldassolares.com/regreso-2/' ; } }, false ); </ script > <?php }
Post a Comment
Read more

Get Single Product By ID in Opencart

<?php if(!empty($_POST["country_id"])) {     $query ="SELECT * FROM oc_product WHERE product_id = '" . $_POST["country_id"] . "'";     $results = $this->db->query($query);   $query2 ="SELECT * FROM oc_product_description WHERE product_id = '" . $_POST["country_id"] . "'";   $results2 = $this->db->query($query2);   $rowresults2 = $results2->row;   $rowresults = $results->row;   $name1 = $rowresults['model'];   $name2 = $rowresults2['name'];   $name3 = $rowresults['price'];   $name4 = 'Exe.' ?>
Post a Comment
Read more