Skip to main content

Slick Carousel Example

Slick Carousel Example

CSS

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css
<style>
.wrapper{
  width:100%;
  text-align:center;
}
h2{
  font-family:'Opan Sans', sans-serif;
  color:#555;
}
.carousel{
  width:90%;
  margin:0px auto;
}
.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
}
</style>

js

cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js

<script>
$(document).ready(function(){
  $('.carousel').slick({
  slidesToShow: 3,
  dots:true,
  centerMode: true,
  });
});
</script>

Html

<div class="wrapper">
  <h2>Slick Carousel Example<h2>
<div class="carousel">
  <div><img src="http://lorempixel.com/200/200/nature/"></div>
  <div><img src="http://lorempixel.com/200/200/fashion/"></div>
  <div><img src="http://lorempixel.com/200/200/sports/"></div>
  <div><img src="http://lorempixel.com/200/200/animal/"></div>
  <div><img src="http://lorempixel.com/200/200/abstract/"></div>
  <div><img src="http://lorempixel.com/200/200/people/"></div>
</div>
</div>







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