Skip to content

Instantly share code, notes, and snippets.

@chaairsoft

chaairsoft/ecommerce-website-template-free-download-ecommerce-website-layout-design.markdown

Created January 29, 2022 18:10
Show Gist options
  • Save chaairsoft/7bacee794a06f1bd633c47ac23c09137 to your computer and use it in GitHub Desktop.
Save chaairsoft/7bacee794a06f1bd633c47ac23c09137 to your computer and use it in GitHub Desktop.
Download ZIP
ecommerce website template free download || ecommerce website layout design
Raw
ecommerce-website-template-free-download-ecommerce-website-layout-design.markdown

ecommerce website template free download || ecommerce website layout design

flipkart like website template free download || ecommerce website template free - ecommerce website template free download || ecommerce website layout design

A Pen by Sunil Kumar on CodePen.

License.

Raw
index.html
<header>
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="logo">
<a href="#"> E-commerce </a>
</div>
</div>
<div class="col-md-7">
<div class="search-area input-group">
<input type="search" name="" placeholder="Search for products">
<button class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="col-md-3">
<div class="logoin-area">
<ul>
<li><a href="#"> <i class="fa fa-user"></i> Login </a></li>
<li><a href="#"> <i class="fa fa-sign-in"></i> Register </a></li>
<li><a href="#"> <i class="fa fa-shopping-cart"></i> Cart </a></li>
<li><span class="mob_menu"><i class="fa fa-bars"></i></span></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="blank-header"></div>
<section class="sec bg-white _category">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="_category">
<ul>
<li>
<div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png">
<a href="#"> <span> Top Offers </span> </a> <i class="fa fa-angle-down _handler"></i>
<ul class="dropdown_menu">
<li> <a href="#"> Men's Top Wear </a> </li>
<li> <a href="#"> Men's Bottom Wear </a> </li>
<li> <a href="#"> Women Ethnic </a> </li>
<li> <a href="#"> Women Western </a></li>
<li> <a href="#"> Men Footwear </a> </li>
<li> <a href="#"> Bags, Suitcases & Luggage </a></li>
<li> <a href="#"> Kids </a></li>
<li> <a href="#"> Essentials </a> </li>
<li> <a href="#"> Winter </a> </li>
</ul>
</div>
</li>
<li>
<div class="_txt"> <img src="https://img.icons8.com/bubbles/2x/product.png">
<a href="#"> <span> Fashion </span> </a> <i class="fa fa-angle-down _handler"></i>
<ul class="dropdown_menu">
<li> <a href="#"> Men's Top Wear </a> </li>
<li> <a href="#"> Men's Bottom Wear </a> </li>
<li> <a href="#"> Women Ethnic </a> </li>
<li> <a href="#"> Women Western </a></li>
<li> <a href="#"> Men Footwear </a> </li>
<li> <a href="#"> Bags, Suitcases & Luggage </a></li>
<li> <a href="#"> Kids </a></li>
<li> <a href="#"> Essentials </a> </li>
<li> <a href="#"> Winter </a> </li>
</ul>
</div>
</li>
<li>
<div class="_txt"> <img src="https://us.123rf.com/450wm/dzein/dzein1501/dzein150100029/35148397-set-of-colorful-empty-shopping-bags-isolated-vector-illustration.jpg">
<a href="#"> <span> Electronics </span> </a> <i class="fa fa-angle-down _handler"></i>
<ul class="dropdown_menu">
<li>
<a href="#"> Men's Top Wear </a> <i class="fa fa-angle-right _handler"></i>
<ul class="dropdown_menu">
<li> <a href="#"> Men's Top Wear </a> </li>
<li> <a href="#"> Men's Bottom Wear </a> </li>
<li> <a href="#"> Women Ethnic </a> </li>
<li> <a href="#"> Women Western </a></li>
<li> <a href="#"> Men Footwear </a> </li>
<li> <a href="#"> Bags, Suitcases & Luggage </a></li>
<li> <a href="#"> Kids </a></li>
<li> <a href="#"> Essentials </a> </li>
<li> <a href="#"> Winter </a> </li>
</ul>
</li>
<li> <a href="#"> Men's Bottom Wear </a> </li>
<li> <a href="#"> Men Footwear </a> </li>
<li> <a href="#"> Bags, Suitcases & Luggage </a></li>
<li> <a href="#"> Kids </a></li>
<li> <a href="#"> Essentials </a> <i class="fa fa-angle-right _handler"></i>
<ul class="dropdown_menu">
<li> <a href="#"> Men's Top Wear </a> </li>
<li> <a href="#"> Men's Bottom Wear </a> </li>
<li> <a href="#"> Women Ethnic </a> </li>
<li> <a href="#"> Women Western </a></li>
<li> <a href="#"> Men Footwear </a> </li>
<li> <a href="#"> Bags, Suitcases & Luggage </a></li>
</ul>
</li>
<li> <a href="#"> Winter </a> </li>
</ul>
</div>
</li>
<li>
<div class="_txt"> <img src="https://www.clipartkey.com/mpngs/m/21-213178_transparent-gondola-clipart-vector-shopping-bag-png.png">
<a href="#"> <span> Top Offers </span> </a>
</div>
</li>
<li>
<div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png">
<a href="#"> <span> Fashion </span> </a>
</div>
</li>
<li>
<div class="_txt"> <img src="https://img.pngio.com/free-rewards-on-groceries-fetch-rewards-products-png-1045_837.png">
<a href="#"> <span> Electronics </span> </a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<main>
<!-- Start Slider Area -->
<div id="home" class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
<img src="https://www.grocerysumo.com/media/slider/home/fsfhjllz_vegetables-banner.png" alt="" title="#slider-direction-4" />
<img src="https://www.grocerysumo.com/media/slider/home/vh9oeys6_fruit-banner.png" alt="" title="#slider-direction-1" />
<img src="http://freshplazaexim.com/assets/images/banner1.jpg" alt="" title="#slider-direction-2" />
<img src="https://www.grocerysumo.com/media/slider/home/fsfhjllz_vegetables-banner.png" alt="" title="#slider-direction-3" />
</div>
<!-- direction 1 -->
</div>
<section class="sec bg-white">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center mb-4">
<a class="btn btn-primary" target="_blank" href="https://www.paypal.com/paypalme/skd1996"> Donate Now <i class="fa fa-dollar"></i></a>
</div>
<div class="col-sm-12">
<div class="title_bx">
<h3 class="title"> Best offer </h3>
<a class="view_btn" href="#"> View All </a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 list-slider mt-2">
<div class="owl-carousel common_wd owl_slider owl-theme">
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec bg-white">
<div class="container">
<div class="row">
<div class="col-md-12 list-slider mt-2">
<div class="owl-carousel common_wd owl_slider owl-theme">
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec bg-white">
<div class="container">
<div class="row">
<div class="col-md-12 list-slider mt-2">
<div class="owl-carousel common_wd owl_slider owl-theme">
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec bg-white">
<div class="container">
<div class="row">
<div class="col-md-12 list-slider mt-2">
<div class="owl-carousel common_wd owl_slider owl-theme">
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/7.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/11.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#">Dazzling Green Blended Silk Saree </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts - Brands mens cloths </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/12.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Milton Bottle </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
<div class="item">
<div class="sq_box shadow">
<div class="pdis_img">
<span class="wishlist">
<a alt="Add to Wish List" title="Add to Wish List" href="javascript:void(0);"> <i class="fa fa-heart"></i></a>
</span>
<a href="#">
<img src="https://maelectrics.com/tf/html/broccoli-preview/broccoli/img/product/13.png">
<div class="q-bx">
<span> Quick View </span>
</div>
</a>
</div>
<h4 class="mb-1"> <a href="#"> Mens Designer Shirts </a> </h4>
<div class="price-box mb-2">
<span class="price"> Price <i class="fa fa-inr"></i> 200 </span>
<span class="offer-price"> Offer Price <i class="fa fa-inr"></i> 120 </span>
</div>
<div class="btn-box text-center">
<a class="btn btn-sm" href="javascript:void(0);"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<h6> Johar Bro Associate </h6>
<ul class="footer-links">
<li><a href="#"> Who We Are </a></li>
<li><a href="#"> Join Our Team </a></li>
<li><a href="#"> Terms & Conditions </a></li>
<li><a href="#"> We Respect Your Privacy </a></li>
<li><a href="#"> Fees & Payments </a></li>
<li><a href="#"> Returns & Refunds Policy </a></li>
<li><a href="#"> Promotions Terms & Conditions </a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h6> Help </h6>
<ul class="footer-links">
<li><a href="#"> Track Your Order </a></li>
<li><a href="#"> Frequently Asked Questions </a></li>
<li><a href="#"> Returns </a></li>
<li><a href="#"> Cancellations </a></li>
<li><a href="#"> Payments </a></li>
<li><a href="#"> How Do I Redeem My Coupon? </a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h6> Shop by </h6>
<ul class="footer-links">
<li><a href="#"> Collections </a></li>
<li><a href="#"> Men </a></li>
<li><a href="#"> Women </a></li>
<li><a href="#"> Kids </a></li>
<li><a href="#"> Indie </a></li>
<li><a href="#"> New Arrivals </a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h6> Follow us </h6>
<ul class="footer-links">
<li> <a href="#">
<i class="fa fa-facebook"></i> Facebook </a>
</li>
<li> <a href="#">
<i class="fa fa-instagram"></i> Instagram </a>
</li>
<li> <a href="#">
<i class="fa fa-twitter"></i> Twitter </a>
</li>
<li> <a href="#">
<i class="fa fa-pinterest"></i> Pinterest </a>
</li>
<li> <a href="#">
<i class="fa fa-whatsapp"></i> WhatsApp </a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-8 pay-mathod">
<h4> Payment methods </h4>
<ul class="ul-payment">
<li>
<img src="https://www.smileyo.in/assets/img/payment.png">
</li>
</ul>
</div>
<div class="col-md-4 ssl_img">
<h4> Secure systems </h4>
<img src="https://www.bobtherailwaydog.com/yahoo_site_admin/assets/images/Paypal_Security20225400_std.33160711_std.jpg" width="80px">
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).addClass('nivoSlider');
// Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
// Get img width & height
var childWidth = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}
// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}
// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Set first background
var sliderImg = $('<img/>').addClass('nivo-main-image');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('display') == 'block'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().fadeOut(settings.animSpeed);
}
}
//Process initial caption
processCaption(settings);
// In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
$(slider).on('click', 'a.nivo-prevNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$(slider).on('click', 'a.nivo-nextNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
// Restart the timer
if(timer === '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.running = false;
// Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
// Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Trigger the afterChange callback
settings.afterChange.call(this);
});
// Add slices for slice animations
var createSlices = function(slider, settings, vars) {
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i === settings.slices-1){
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:(slider.width()-(sliceWidth*i))+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
} else {
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
}
}
$('.nivo-slice', slider).height(sliceHeight);
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var boxWidth = Math.round(slider.width()/settings.boxCols),
boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols === settings.boxCols-1){
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider.width()-(boxWidth*cols))+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
} else {
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
}
}
}
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Private run method
var nivoRun = function(slider, kids, settings, nudge){
// Get our vars
var vars = slider.data('nivo:vars');
// Trigger the lastSlide callback
if(vars && (vars.currentSlide === vars.totalSlides - 1)){
settings.lastSlide.call(this);
}
// Stop
if((!vars || vars.stop) && !nudge) { return false; }
// Trigger the beforeChange callback
settings.beforeChange.call(this);
// Set current background before change
if(!nudge){
sliderImg.attr('src', vars.currentImage.attr('src'));
} else {
if(nudge === 'prev'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
if(nudge === 'next'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
}
vars.currentSlide++;
// Trigger the slideshowEnd callback
if(vars.currentSlide === vars.totalSlides){
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); }
// Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Set active links
if(settings.controlNav){
$('a', vars.controlNavEl).removeClass('active');
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
}
// Process caption
processCaption(settings);
// Remove any slices from last transition
$('.nivo-slice', slider).remove();
// Remove any boxes from last transition
$('.nivo-box', slider).remove();
var currentEffect = settings.effect,
anims = '';
// Generate random effect
if(settings.effect === 'random'){
anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') !== -1){
anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
}
// Run effects
vars.running = true;
var timeBuff = 0,
i = 0,
slices = '',
firstSlice = '',
totalBoxes = '',
boxes = '';
if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'top': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'bottom': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
var v = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
if(i === 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
} else if(currentEffect === 'fold'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
$('.nivo-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', width:'0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'fade'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': slider.width() + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInRight'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInLeft'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('nivo:animFinished');
});
} else if(currentEffect === 'boxRandom'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
boxes = shuffle($('.nivo-box', slider));
boxes.each(function(){
var box = $(this);
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
} else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
// Split boxes into 2D array
var rowIndex = 0;
var colIndex = 0;
var box2Darr = [];
box2Darr[rowIndex] = [];
boxes = $('.nivo-box', slider);
if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){
boxes = $('.nivo-box', slider)._reverse();
}
boxes.each(function(){
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if(colIndex === settings.boxCols){
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = [];
}
});
// Run animation
for(var cols = 0; cols < (settings.boxCols * 2); cols++){
var prevCol = cols;
for(var rows = 0; rows < settings.boxRows; rows++){
if(prevCol >= 0 && prevCol < settings.boxCols){
/* Due to some weird JS bug with loop vars
being used in setTimeout, this is wrapped
with an anonymous function call */
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
box.width(0).height(0);
}
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + time));
} else {
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
};
// Shuffle an array
var shuffle = function(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
// For debugging
var trace = function(msg){
if(this.console && typeof console.log !== 'undefined') { console.log(msg); }
};
// Start / Stop
this.stop = function(){
if(!$(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
};
this.start = function(){
if($(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
};
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return this;
};
$.fn.nivoSlider = function(options) {
return this.each(function(key, value){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('nivoslider')) { return element.data('nivoslider'); }
// Pass options to plugin constructor
var nivoslider = new NivoSlider(this, options);
// Store plugin object in this element's data
element.data('nivoslider', nivoslider);
});
};
//Default settings
$.fn.nivoSlider.defaults = {
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).addClass('nivoSlider');
// Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
// Get img width & height
var childWidth = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}
// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}
// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Set first background
var sliderImg = $('<img/>').addClass('nivo-main-image');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('display') == 'block'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().fadeOut(settings.animSpeed);
}
}
//Process initial caption
processCaption(settings);
// In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
$(slider).on('click', 'a.nivo-prevNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$(slider).on('click', 'a.nivo-nextNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
// Restart the timer
if(timer === '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.running = false;
// Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
// Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Trigger the afterChange callback
settings.afterChange.call(this);
});
// Add slices for slice animations
var createSlices = function(slider, settings, vars) {
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i === settings.slices-1){
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:(slider.width()-(sliceWidth*i))+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
} else {
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
}
}
$('.nivo-slice', slider).height(sliceHeight);
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var boxWidth = Math.round(slider.width()/settings.boxCols),
boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols === settings.boxCols-1){
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider.width()-(boxWidth*cols))+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
} else {
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
}
}
}
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Private run method
var nivoRun = function(slider, kids, settings, nudge){
// Get our vars
var vars = slider.data('nivo:vars');
// Trigger the lastSlide callback
if(vars && (vars.currentSlide === vars.totalSlides - 1)){
settings.lastSlide.call(this);
}
// Stop
if((!vars || vars.stop) && !nudge) { return false; }
// Trigger the beforeChange callback
settings.beforeChange.call(this);
// Set current background before change
if(!nudge){
sliderImg.attr('src', vars.currentImage.attr('src'));
} else {
if(nudge === 'prev'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
if(nudge === 'next'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
}
vars.currentSlide++;
// Trigger the slideshowEnd callback
if(vars.currentSlide === vars.totalSlides){
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); }
// Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Set active links
if(settings.controlNav){
$('a', vars.controlNavEl).removeClass('active');
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
}
// Process caption
processCaption(settings);
// Remove any slices from last transition
$('.nivo-slice', slider).remove();
// Remove any boxes from last transition
$('.nivo-box', slider).remove();
var currentEffect = settings.effect,
anims = '';
// Generate random effect
if(settings.effect === 'random'){
anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') !== -1){
anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
}
// Run effects
vars.running = true;
var timeBuff = 0,
i = 0,
slices = '',
firstSlice = '',
totalBoxes = '',
boxes = '';
if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'top': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
slice.css({ 'bottom': '0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
var v = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }
slices.each(function(){
var slice = $(this);
if(i === 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v === settings.slices-1){
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
} else if(currentEffect === 'fold'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
$('.nivo-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', width:'0px' });
if(i === settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
} else if(currentEffect === 'fade'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': slider.width() + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInRight'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else if(currentEffect === 'slideInLeft'){
createSlices(slider, settings, vars);
firstSlice = $('.nivo-slice:first', slider);
firstSlice.css({
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('nivo:animFinished');
});
} else if(currentEffect === 'boxRandom'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
boxes = shuffle($('.nivo-box', slider));
boxes.each(function(){
var box = $(this);
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
} else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
createBoxes(slider, settings, vars);
totalBoxes = settings.boxCols * settings.boxRows;
i = 0;
timeBuff = 0;
// Split boxes into 2D array
var rowIndex = 0;
var colIndex = 0;
var box2Darr = [];
box2Darr[rowIndex] = [];
boxes = $('.nivo-box', slider);
if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){
boxes = $('.nivo-box', slider)._reverse();
}
boxes.each(function(){
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if(colIndex === settings.boxCols){
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = [];
}
});
// Run animation
for(var cols = 0; cols < (settings.boxCols * 2); cols++){
var prevCol = cols;
for(var rows = 0; rows < settings.boxRows; rows++){
if(prevCol >= 0 && prevCol < settings.boxCols){
/* Due to some weird JS bug with loop vars
being used in setTimeout, this is wrapped
with an anonymous function call */
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){
box.width(0).height(0);
}
if(i === totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + time));
} else {
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
};
// Shuffle an array
var shuffle = function(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
// For debugging
var trace = function(msg){
if(this.console && typeof console.log !== 'undefined') { console.log(msg); }
};
// Start / Stop
this.stop = function(){
if(!$(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = true;
trace('Stop Slider');
}
};
this.start = function(){
if($(element).data('nivo:vars').stop){
$(element).data('nivo:vars').stop = false;
trace('Start Slider');
}
};
// Trigger the afterLoad callback
settings.afterLoad.call(this);
return this;
};
$.fn.nivoSlider = function(options) {
return this.each(function(key, value){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('nivoslider')) { return element.data('nivoslider'); }
// Pass options to plugin constructor
var nivoslider = new NivoSlider(this, options);
// Store plugin object in this element's data
element.data('nivoslider', nivoslider);
});
};
//Default settings
$.fn.nivoSlider.defaults = {
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);
$(document).ready(function () {
$(".mob_menu").click(function(){
$("._category").slideToggle();
});
$('._handler').on("click", function() {
$(this).siblings('ul.dropdown_menu').toggle();
});
var owl = $('.owl_slider');
owl.owlCarousel({
margin:10,
dots:false,
nav: true,
navText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
],
autoplay: true,
autoplayHoverPause: false,
responsive: {
0: {
items: 2
},
600: {
items:3
},
1000: {
items:5
},
1200: {
items:5
}
}
});
$('#ensign-nivoslider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 12,
boxRows: 8,
animSpeed: 500,
pauseTime: 5000,
startSlide: 0,
directionNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
});
});
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Raw
style.css
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
/* #container {
width:100%;
height:100%;
overflow:hidden;
position:fixed;
top:0px;
left:0px;
}
.nivoSlider {
position:fixed;
top:-16px;
left:0px;
}
.nivoSlider img {position:absolute;
top:0px;
left:0px;
} */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
height:100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
cursor: pointer;
margin-top: -25px;
position: absolute;
top: 50%;
z-index: 9;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/* ------------------------------
Default Theme
---------------------------------*/
.slider-direction {
position: absolute;
left:0;
top:0;
width: 100%;
background: none;
color: #fff;
font-size: 16px;
z-index: 999;
display: none;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-caption {
position:absolute;
left:0;
top:0;
color:#fff;
width:100%;
height: 100%;
z-index:8;
opacity:1;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
@-webkit-keyframes myfirst {
from {width: 0;}
to {width: 100%;}
}
@keyframes myfirst {
from {width: 0;}
to {width: 100%;}
}
.slider-progress.pos_hover{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* ------------------------------
custom slider
---------------------------------*/
.slider-progress{
position:absolute;
top:0;
left:0;
background-color: rgba(49, 56, 72, 0.298);
height:5px;
-webkit-animation: myfirst 5000ms ease-in-out;
-moz-animation: myfirst 5000ms ease-in-out;
-ms-animation: myfirst 5000ms ease-in-out;
animation: myfirst 5000ms ease-in-out;
}
.s-tb{
display: table;
height: 100%;
width: 100%;
float: left;
}
.s-tb-c{
display: table-cell;
vertical-align: middle;
}
.t-cn{text-align: center}
.t-lft{text-align: left}
.t-lfr{text-align: right}
/* ------------------------------
slider animation
---------------------------------*/
/* -------------- Home 1 ---------------- */
.home1 .slider-1 h1{
-webkit-animation: bounceInUp 1000ms ease-in-out;
-moz-animation: bounceInUp 1000ms ease-in-out;
-ms-animation: bounceInUp 1000ms ease-in-out;
animation: bounceInUp 1000ms ease-in-out;
}
.home1 .slider-1 h2{
-webkit-animation: fadeInRight 1500ms ease-in-out;
-moz-animation: fadeInRight 1500ms ease-in-out;
-ms-animation: fadeInRight 1500ms ease-in-out;
animation: fadeInRight 1500ms ease-in-out;
}
.home1 .slider-2 h1{
-webkit-animation: fadeInLeft 500ms ease-in-out;
-moz-animation: fadeInLeft 500ms ease-in-out;
-ms-animation: fadeInLeft 500ms ease-in-out;
animation: fadeInLeft 500ms ease-in-out;
}
.home1 .slider-2 h3{
-webkit-animation: fadeInLeft 1500ms ease-in-out;
-moz-animation: fadeInLeft 1500ms ease-in-out;
-ms-animation: fadeInLeft 1500ms ease-in-out;
animation: fadeInLeft 1500ms ease-in-out;
}
/* -------------- Home 2 ---------------- */
.home2 .slider-2 h1{
-webkit-animation: fadeInLeft 500ms ease-in-out;
-moz-animation: fadeInLeft 500ms ease-in-out;
-ms-animation: fadeInLeft 500ms ease-in-out;
animation: fadeInLeft 500ms ease-in-out;
}
.home2 .slider-2 h3{
-webkit-animation: fadeInLeft 1500ms ease-in-out;
-moz-animation: fadeInLeft 1500ms ease-in-out;
-ms-animation: fadeInLeft 1500ms ease-in-out;
animation: fadeInLeft 1500ms ease-in-out;
}
.home2 .layer-1{
-webkit-animation: fadeInLeft 1500ms ease-in-out;
-moz-animation: fadeInLeft 1500ms ease-in-out;
-ms-animation: fadeInLeft 1500ms ease-in-out;
animation: fadeInLeft 1500ms ease-in-out;
}
.home2 .layer-2{
-webkit-animation: bounceInUp 1000ms ease-in-out;
-moz-animation: bounceInUp 1000ms ease-in-out;
-ms-animation: bounceInUp 1000ms ease-in-out;
animation: bounceInUp 1000ms ease-in-out;
}
.home2 .layer-3{
-webkit-animation: fadeInRight 1500ms ease-in-out;
-moz-animation: fadeInRight 1500ms ease-in-out;
-ms-animation: fadeInRight 1500ms ease-in-out;
animation: fadeInRight 1500ms ease-in-out;
}
.home2 .layer-1-1{
-webkit-animation: fadeInRight 1500ms ease-in-out;
-moz-animation: fadeInRight 1500ms ease-in-out;
-ms-animation: fadeInRight 1500ms ease-in-out;
animation: fadeInRight 1500ms ease-in-out;
}
/* -------------- Home 3 ---------------- */
.home3 .slider-1 h1{
-webkit-animation: fadeInLeft 500ms ease-in-out;
-moz-animation: fadeInLeft 500ms ease-in-out;
-ms-animation: fadeInLeft 500ms ease-in-out;
animation: fadeInLeft 500ms ease-in-out;
}
.home3 .slider-1 h3{
-webkit-animation: fadeInLeft 1500ms ease-in-out;
-moz-animation: fadeInLeft 1500ms ease-in-out;
-ms-animation: fadeInLeft 1500ms ease-in-out;
animation: fadeInLeft 1500ms ease-in-out;
}
.home3 .slider-2 h1{
-webkit-animation: bounceInUp 1000ms ease-in-out;
-moz-animation: bounceInUp 1000ms ease-in-out;
-ms-animation: bounceInUp 1000ms ease-in-out;
animation: bounceInUp 1000ms ease-in-out;
}
.home3 .slider-2 h3{
-webkit-animation: fadeInLeft 1500ms ease-in-out;
-moz-animation: fadeInLeft 1500ms ease-in-out;
-ms-animation: fadeInLeft 1500ms ease-in-out;
animation: fadeInLeft 1500ms ease-in-out;
}
.home3 .slider-3 h1{
-webkit-animation: fadeInRight 500ms ease-in-out;
-moz-animation: fadeInRight 500ms ease-in-out;
-ms-animation: fadeInRight 500ms ease-in-out;
animation: fadeInRight 500ms ease-in-out;
}
.home3 .slider-3 h3{
-webkit-animation: fadeInRight 1500ms ease-in-out;
-moz-animation: fadeInRight 1500ms ease-in-out;
-ms-animation: fadeInRight 1500ms ease-in-out;
animation: fadeInRight 1500ms ease-in-out;
}
:root{
--libre:'Roboto', sans-serif;
--sky-blue:#2699cf;
--blue:#175f9e;
--orange:#f66620;
--black:#000000;
--white:#ffffff;
--gray:#F5F6FA;
--lightgray:#e9ecef;
--red:#da251d;
}
*{margin:0;padding:0;box-sizing:border-box; font-family:Roboto; }
::-webkit-scrollbar-track{background-color:#eee;}
::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:10px;}
::-webkit-scrollbar{width:10px;border-radius:10px;}
html, body{margin:0;padding:0;font-family:'Roboto', sans-serif;scroll-behavior:smooth;font-size:20px;color:var(--black);background:#EEEEEE;}
ul, ul~li{margin:0;padding:0;list-style-type:none;}
body{
font-size: 14px;
background-color: #dbdbdc;
color: #212121;
line-height: 1.4;
}
a{text-decoration:none;}
@media (min-width: 1200px){
.container {
max-width: 1290px;
}}
/*========header=========*/
header {
padding: 10px 0px 10px 0px;
background-color: #007bff;
position: fixed;
width: 100%;
z-index: 100;
}
.logo {
margin-top: 0px;
}
.logo a{ color:#fff; font-size:30px; }
.logo img {
width: 90px;
}
.mob_menu {
display: none;
}
.logoin-area {
position: relative;
padding-top:20px;
}
.logoin-area ul {
list-style: none;
display: flex;
align-items: center;
}
.logoin-area ul li { margin-right:20px; }
.logoin-area ul li a {
color: #fff;
font-size: 16px;
}
.search-area {
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding-top: 10px;
width:90%;
margin:auto;
}
.search-area input {
padding:4px 10px;
border: solid 1px #ccc;
width: 100%;
height:40px;
border-radius: 4px;
box-shadow: 0px 1px 3px rgb(0 0 0 / 22%);
}
.search-area button.search-btn {
position: absolute;
right: 0px;
border: 0px;
border-radius: 4px;
height:40px;
width: 50px;
background-color: transparent;
color: #ef363c;
cursor: pointer;
}
.search-area input::placeholder{color:#000;font-size:16px;}
.search-area button.search-btn:focus, .search-area input:focus{ outline:none; }
.title_bx .view_btn {
background-color: #ed2027;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
width: 90px;
height: 35px;
border-radius: 4px;
box-shadow: 0px 1px 2px #ccc;
font-size: 15px;
cursor: pointer;
position: relative;
top: -5px;
}
/*========menu=========*/
._category > ul {
display: flex;
justify-content: space-around;
}
._category ul li a{ text-decoration:none; }
._category ul li ._txt {
text-align: center;
font-size: 16px;
font-weight: 400;
color: #212529;
position: relative;
}
._category ul li ._txt img {
display: block;
height: 65px;
}
.slider-area .slides img {
height: 345px;
object-fit: cover;
}
section._category{ margin:0px; padding:5px 0px; }
._category ul li {
position: relative;
cursor:pointer;
}
._category ul li ul.dropdown_menu {
position: absolute;
width: 200px;
background-color: #f9f8f8;
z-index: 100;
left: -25px;
margin-top: 0px;
display: none;
}
._category ul li ul.dropdown_menu li {
display: block;
}
._category ul li ul.dropdown_menu li a {
display: block;
width: 100%;
text-align: left;
font-size: 15px;
padding: 8px 10px;
border-bottom: solid 1px #ece8ea;
transition: all ease-in-out 0.3s;
cursor: pointer;
color: #353535;
}
._category ul li ul.dropdown_menu li:last-child a { border-bottom:0px; }
._category ul li ._txt a {
color: #000;
}
._category > ul > li:hover ul {
display: block;
}
._category > ul > li:hover ul li ul {
display: none;
}
._category > ul > li ul li:hover ul {
display: block;
left: 100%;
top: 0px;
background-color: #d0cdcd;
}
._category ul li ul.dropdown_menu li a:hover {
background-color: #b66f35;
color: #fff;
}
._category ul li ul.dropdown_menu li i.fa {
position: absolute;
right: 0px;
top: 0px;
width: 40px;
height: 38px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
._category ul li i.fa {
font-size: 18px;
font-weight: 900;
cursor: pointer;
}
section._category {
margin: 0px !important;
padding: 5px 0px !important;
}
.blank-header {
height: 70px;
}
/*=======sliderArea======*/
.slider-area .slides img {
height: 500px;
width: 100%;
object-fit: cover;
}
.slider-area{color:#fff;position:relative;text-align:center;}
.slider-content{padding:180px 60px;}
.nivo-caption::after{background:#444 none repeat scroll 0 0;content:"";height:100%;left:0;opacity:0.0;position:absolute;top:0;width:100%;z-index:-1;}
.layer-1-2{margin:20px 0;}
.layer-1-1 h2{color:#fff;font-size:22px;font-weight:500;}
.layer-1-2 h1{color:#fff;font-size:40px;font-weight:500;text-shadow:1px 1px 1px #000;}
.layer-1-3{margin:50px 0 0;}
.layer-1-3 a.ready-btn{border:1px solid #fff;border-radius:30px;color:#fff;cursor:pointer;font-size:17px;font-weight:600;margin-top:30px;padding:10px 20px;text-align:center;text-transform:uppercase;transition:all 0.4s ease 0s;z-index:222;display:none;}
.layer-1-3 a.ready-btn:hover{color:#fff;background:#3EC1D5;border:1px solid #3EC1D5;text-decoration:none;}
.ready-btn.right-btn{margin-right:15px;background:#3EC1D5;border:1px solid #3EC1D5 !important;}
.ready-btn.right-btn:hover{background:transparent !important;border:1px solid #fff !important;}
.nivo-controlNav{bottom:0;left:0;position:absolute;right:0;z-index:8;}
.nivo-directionNav{display:block;}
.nivo-controlNav a{background:transparent none repeat scroll 0 0;border:2px solid #fff;box-shadow:none;display:inline-block;font-size:0;height:2px;margin:5px 3px;opacity:1;text-align:center;text-indent:inherit;vertical-align:top;width:20px;}
.nivo-controlNav a:hover, .nivo-controlNav a.active{background:#fff none repeat scroll 0 0;border-color:#3EC1D5;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);}
(min-width:1400px) and (max-width:1920px){.slider-content{padding:340px 0;}
}
@media (min-width:992px) and (max-width:1169px){.slider-content{padding:144px 0;}
}
@media (min-width:768px) and (max-width:991px){.slider-content{padding:93px 0;}
.layer-1-2 h1{font-size:22px;line-height:24px;}
.layer-1-3 a.ready-btn{font-size:14px;margin-top:20px;padding:10px 20px;}
}
@media (max-width:767px){.nivo-directionNav{display:none;}
.slider-content{padding:46px 0px;}
.layer-1-2{margin:10px 0;}
.layer-1-1 h2{font-size:14px;line-height:16px;}
.layer-1-2 h1{font-size:14px;line-height:16px;}
.layer-1-3 a.ready-btn{font-size:12px;margin-top:10px;padding:8px 10px;}
.layer-1-3{margin:10px 0 0;}
.nivo-controlNav{bottom:-8px;}
}
@media only screen and (min-width:480px) and (max-width:767px){.slider-content{padding:70px 0px;}
.layer-1-1 h2, .layer-1-2 h1{font-size:24px;line-height:30px;}
}
.preview-1 .nivoSlider{position:relative;background:url(../lib/nivo-slider/img/loading.gif) no-repeat 50% 50%;}
.preview-1 .nivoSlider img{position:absolute;top:0px;left:0px;display:none;}
.preview-1 .nivoSlider a{border:0;display:block;}
.preview-1 .nivo-controlNav{text-align:center;padding:20px 0;}
.preview-1 .nivo-controlNav a{display:inline-block;width:22px;height:22px;background:url(../lib/nivo-slider/img/bullets.png) no-repeat;text-indent:-9999px;border:0;margin:0 2px;}
.preview-1 .nivo-controlNav a.active{background-position:0 -22px;}
.preview-1 .nivo-directionNav a{display:block;width:30px;height:30px;background:url(../lib/nivo-slider/img/arrows.png) no-repeat;text-indent:-9999px;border:0;opacity:0;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;}
.preview-1:hover .nivo-directionNav a{opacity:1;}
.nivo-prevNav{left:15px;}
.nivo-nextNav{right:15px;}
.preview-1 a.nivo-nextNav{background-position:-30px 0;}
.preview-1 .nivo-caption{font-family:Helvetica, Arial, sans-serif;}
.preview-1 .nivo-caption a{color:#fff;border-bottom:1px dotted #fff;}
.preview-1 .nivo-caption a:hover{color:#fff;}
.preview-1 .nivo-controlNav.nivo-thumbs-enabled{width:100%;}
.preview-1 .nivo-controlNav.nivo-thumbs-enabled a{width:auto;height:auto;background:none;margin-bottom:5px;}
.preview-1 .nivo-controlNav.nivo-thumbs-enabled img{display:block;width:120px;height:auto;}
.preview-1 .nivo-controlNav{position:relative;z-index:99999;bottom:68px;}
.preview-1 .nivo-controlNav a{border:5px solid #fff;display:inline-block;height:18px;margin:0 5px;text-indent:-9999px;width:18px;line-height:8px;background:#3c3c3c;cursor:pointer;position:relative;z-index:9;border-radius:100%;opacity:0;z-index:-999;}
.preview-1:hover .nivo-controlNav a{opacity:1;z-index:999999;}
.preview-1 .nivo-controlNav a:hover, .preview-1 .nivo-controlNav a.active{background:#000;cursor:pointer;}
.preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-prevNav{left:50px;}
.preview-2 .nivoSlider:hover .nivo-directionNav a.nivo-nextNav{right:50px;}
.preview-2 .nivoSlider .nivo-directionNav a.nivo-prevNav{font-size:0;}
.preview-2 .nivoSlider .nivo-directionNav a.nivo-nextNav{font-size:0;}
.preview-2 .nivo-directionNav a.nivo-prevNav::before{background:rgba(0, 0, 0, 0) none repeat scroll 0 0;color:#ffffff;content:"\f053";cursor:pointer;font:300 50px/50px FontAwesome;position:absolute;text-align:center;top:50%;transition:all 300ms ease-in 0s;z-index:9;font-weight:100;left:0px;width:50px;border:1px solid #fff;border-radius:50%;font-size:30px;}
.preview-2 .nivo-directionNav a.nivo-nextNav:hover:before, .preview-2 .nivo-directionNav a.nivo-prevNav:hover:before{border-color:var(--blue);color:#fff;background:var(--blue);}
.preview-2 .nivo-directionNav a.nivo-nextNav::before{background:rgba(0, 0, 0, 0) none repeat scroll 0 0;border:1px solid #fff;border-radius:50%;color:#ffffff;content:"\f054";cursor:pointer;font:100 30px/50px FontAwesome;height:50px;position:absolute;right:0px;text-align:center;top:50%;transition:all 300ms ease-in 0s;width:50px;z-index:9;font-size:30px;}
.niceties.preview-2{position:relative;height:100%;}
/*========products-slider========*/
section.sec {
padding: 25px 0px;
position: relative;
margin: 10px 10px;
}
.bg-white {
background-color: #fff!important;
}
.title_bx {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
.title_bx h3.title {
font-size: 22px;
text-transform: capitalize;
position: relative;
color: #495057;
font-weight: 700;
line-height: 1.2em;
}
/*========box========*/
.sq_box {
padding-bottom: 5px;
border-bottom: solid 2px var(--blue);
background-color: #fff;
text-align: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-radius: 4px;
overflow: hidden;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition:0.5s;
-o-transition: 0.5s;
}
.item .sq_box span.wishlist {
right: 8px !important;
}
.sq_box span.wishlist {
position: absolute;
top:10px;
right: 20px;
z-index: 20;
}
.sq_box span {
font-size: 14px;
font-weight: 600;
margin: 0px 3px;
}
.sq_box span.wishlist i {
color: #adb5bd;
font-size: 20px;
}
.sq_box h4 {
font-size: 16px;
text-align: center;
font-weight: 500;
color: #343a40;
margin-top: 8px;
padding: 0px 8px;
margin-bottom: 8px !important;
}
.sq_box h4 a {
color: #000;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
}
.sq_box .price-box {
margin-bottom:10px !important;
}
.pdis_img:hover .q-bx {
display: flex;
align-items: center;
justify-content: center;
}
.sq_box .btn {
border-radius: 50px;
padding: 5px 13px;
font-size: 15px;
color: #fff;
background-color: var(--red);
font-weight: 600;
}
.sq_box .price-box span.price {
text-decoration: line-through;
color: #6c757d;
}
.sq_box span {
font-size: 14px;
font-weight:500;
margin: 0px 5px;
}
.sq_box .price-box span.offer-price {
color:#28a745;
}
.sq_box img {
object-fit: cover;
height:250px !important;
margin-top:0px;
}
.sq_box span.wishlist i:hover {
color: #fd7f34;
}
#recent_post .owl-nav {
top: -26%;
}
.sq_box .pdis_img{ position:relative; overflow:hidden;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
}
.sq_box .pdis_img img{
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
cursor:pointer;
}
.sq_box .pdis_img:hover img{ -webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2); }
.sq_box .pdis_img .q-bx { }
.sq_box .pdis_img .q-bx span { color:#fff; }
.pdis_img:hover .q-bx {
height: 40px;
}
.q-bx {
background-color:rgba(218, 37, 29, 0.52);
width: 100%;
height: 0px;
position: absolute;
bottom:0px;
text-align: center;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
}
.sq_box:hover span.wishlist i {
color: #fd7f34;
}
.common_wd .owl-nav {
position: absolute;
top: 40%;
right: 4px;
width: 100%;
}
.common_wd .owl-nav .owl-prev, .common_wd .owl-nav .owl-next {
background-color: #ed2027 !important;
display: flex;
align-items: center;
justify-content: center;
height: 75px;
width: 35px;
text-align: center;
border-radius: 3px !important;
}
.owl-nav .owl-prev, .owl-nav .owl-next {
top: 32%;
position: absolute;
border-radius: 40px !important;
color: var(--white) !important;
width: 40px;
height: 40px;
text-align: center;
}
.owl-nav .owl-prev {
left: -15px;
}
.owl-nav .owl-next {
right: -20px;
}
/*================footer=========*/
.site-footer{background-color:#2c4152;padding:45px 0 20px;font-size:16px;line-height:24px;color:#fff;}
.site-footer h6{color:#fff;font-size:14px;text-transform:capitalize;margin-top:5px;margin-bottom:20px;font-weight:400;text-align:left;}
.site-footer a:hover{color:#3366cc;text-decoration:none;}
.footer-links{padding-left:0;list-style:none;text-align:left;}
.footer-logo{padding:15px;border-radius:4px;}
.footer-logo a{}
footer.site-footer ul.footer-links li a{font-size:12px;color:#ccc;}
footer.site-footer ul.footer-links li{margin-bottom:5px;}
.footer-logo a img{max-width:100%;}
.footer-links ul{margin-top:30px;}
.footer-links ul li{display:inline-block;margin:0px 15px;}
.footer-links ul li a{font-size:16px;font-weight:100;}
.footer-links a{color:#fff;opacity:1;}
.footer-links a:hover{color:#50aed6;}
.footer-bottom{background-color:#2c4152;padding:30px 0px;border-top:solid 1px #13446f;}
.footer-bottom p{font-size:20px;color:#fff;text-align:center;margin-bottom:0px;}
.footer-bottom h4{font-size:14px;color:#ccc;margin-bottom:15px;}
.footer-bottom ul{margin:0px;padding:0px;}
.footer-bottom ul li{display:inline-block;}
.footer-bottom ul li img{width:180px;border-radius:3px;}
@media(max-width:600px){
.logo {
text-align: center;
}
header{ position:relative; }
.blank-header{ display:none; }
.mob_menu {
display: flex !important;
border: solid 2px #e9ecef;
width: 45px;
height: 35px;
text-align: center;
padding-top: 1px;
justify-content: center;
border-radius: 4px;
position: absolute;
align-items: center;
top: 20%;
right: 5%;
cursor: pointer;
}
section.sec {
padding: 10px 0px;
position: relative;
}
._category ul {
flex-wrap: wrap;
}
._category > ul > li {
width: 100%;
text-align: left;
padding-bottom: 10px;
border-bottom: solid 1px #989595cc;
margin-bottom: 10px;
}
._category ul li ._txt {
text-align: left;
font-size: 16px;
font-weight: 400;
color: #212529;
}
._category ul li ._txt img {
display: none;
height: 40px;
margin: auto;
}
._category ul li i.fa {
font-size: 22px;
font-weight: 900;
cursor: pointer;
float: right;
width: 50px;
height: 30px;
background-color: transparent;
position: absolute;
right: 0px;
display: flex;
align-items: center;
justify-content: flex-end;
color: #000;
top: 0px;
}
._category ul li ul.dropdown_menu {
position: relative;
width: 100%;
background-color: #dcd6d6;
z-index: 100;
left: 0px;
margin-top: 0px;
display: none;
top:15px;
}
._category > ul > li ul li:hover ul {
left: 0px;
}
._category{ display:none; }
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment