How to edit sliders
The slider used on index.html is slick slider and the images and text can be edited in the following markup
<!--start slider --> <div class="home-slider"> <div class="media-container media-container--slider" style="background-image:url(images/store_slider.jpg)"> <div class="container-custom custom-height-container flex"> <div class="slide-content flex-center "> <div class="title-block "> <h1 class="title-block__title--slider"><span>Sell your products</span></h1> <h3 class="title-block__subtitle--slider">The simplest way possible</h3> </div> <a href="cart.html" class="btn btn--black btn--60">Add to cart</a> </div> </div> </div> .. </div>
The class that triggers the slider is .home-slider
The glitch effect comes from https://tympanus.net/Tutorials/CSSGlitchEffect/index3.html
It is not available on Internet Explorer.
the code related is found on index.html
and app\css\scss\elements\_homeslide.scss
The css for this slider is found at app\css\scss\elements\_homeslide.scss
The class that triggers the slider on the product page is .product-gallery
The slider used on the shop page is swiper slider and the images and text can be edited in the following markup
<!-- big images --> <div class="Gallery swiper--container"> <div class="swiper-wrapper"> <!--slide 1--> <div class="swiper-slide" style="background-image:url(images/store-product-list_clean_03.jpg);"> <div class="slider-content"> <div class="title-block "> <h1 class="title-block__title--swiperBig"><span>50% Sale</span></h1> <h3 class="title-block__subtitle--swiperBig"><span>On all orders above $100 + free shipping</span></h3> </div> <a href="cart.html" class="btn btn--black btn--60">Read more</a> </div> </div> <!--slide 2--> ... <!-- thumbs --> <div class="Thumbs swiper--container"> <div class="swiper-wrapper"> <!--slide thumb 1--> <div class="thumbs swiper-slide"> <div class="thumbs title-block "> <h1 class="title-block__title--swiper">Accesories</h1> <h3 class="title-block__subtitle--swiper">Refine your selection</h3> </div> <img src="images/store-product-list_clean_05.jpg" alt title="shop"> </div> <!--slide thumb 2--> ... </div> <!--end wrapper--> </div> <!--end container-->
the css can be modified at app\css\scss\elements\_shop.scss