Skip to main content

Slick Slider JQuery

Create  Slick Slider JQuery and Html 
<!DOCTYPE html>
<html>
<head>
<title>SLick slider </title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://webplanetsoft.com/wp-content/themes/wps/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<style type="text/css">
.vinbigtext {
    background: #ccc;
    padding: 80px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: #000;
    font-weight: bold;
}
button.slick-next.slick-arrow { background: #000; }
button.slick-prev.slick-arrow { background: #000;}

 </style>
</head>
<body>
<div class="container">
<div class="vinslider">
<div class="col-md-4">
<div class="vinbigtext"> 1 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 2 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 3 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 4 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 5 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 6 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 7 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 8 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 9 </div>
</div>
<div class="col-md-4">
<div class="vinbigtext"> 10 </div>
</div>

 </div>

 </div>

 </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
jQuery('.vinslider').slick({
 dots: false,
 infinite: true,
 speed: 300,
 slidesToShow: 3,
 slidesToScroll: 1,
  smartSpeed:1000,
        autoplay:true,
autoplayTimeout: 500,
autoplaySpeed: 1000,
 responsive: [
   {
     breakpoint: 1024,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
       infinite: true,
       dots: true
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1
     }
   },
    {
     breakpoint: 480,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
   // You can unslick at a given breakpoint now by adding:
   // settings: "unslick"
   // instead of a settings object
 ]
});
</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