Customize Touch Enabled Full Screen Responsive Image Slider

BlogrCart Closet Blogger Theme comes with a responsive touch enabled full screen background image slider which centres your Blogger store homepage images proportionately in any screen sizes. Unlike other Blogger powered store templates available for downloads, product images displayed here are well preserved. A quick note, upload product images preferably at a rectangular (or square) size, with an image ratio of 4:3, below 100kb per image file size. For best image display, upload product images at 1600px (w) X 1200px (h). Below are the instructions to edit the image slider displayed, click to action text & the click to action buttons.

$ 39.90

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• The Codes & Instructions
• Advance Settings

Below is an example of the responsive touch/mouse enabled full width image slider with fade effect. pre-installed. with BlogrCart template. <!-- Image carousel slider starts -->     <b:if cond='data:blog.url == data:blog.homepageUrl'>      <div class='header-carousel'>         <div class='header-carousel-image height-680' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBBPe4uBytkb9G5SfQ-O9gOjbTk5_QjZjLkgGs47P3TzpJIub6domDl7wuoTvjDyMAj5AelTN6xSpeJspbwKVRjYqpBPHPjJER_qHiQ2bi213fJWld_ChFJkCygX4Z3NcSdoLFF34u_Y/s1600/blogr+template+free+theme+download-compressed.jpg);'>           <div class='header-carousel-caption'>             <span>               <h3 class='leader'>The Last Blogger Store You Need</h3>               <a class='btn btn-default btn-lg' href='#'>View New Product Now</a>             </span>           </div>         </div>         <div class='header-carousel-image height-680' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbS_KJKo5bMnz6QdPJHJ2k1hZte62N1TwJG82Lbv0wrfwatxOHU4hPe6JmpBBpRs0O_K6sosOlrSBTVfJ1WBlQz-OEpDHUdE0KIKgnxwQGx9Lm6EX_J5IO564QmCfLxtFv1QN3mEwZ28/s1600/blogr+template+free+theme+download_3.jpg);'>           <div class='header-carousel-caption'>             <span>               <h3 class='leader'>Great Discounts Affordable Online Prices</h3>               <a class='btn btn-default btn-lg' href='#'>Contact Us</a>             </span>           </div>         </div>         <div class='header-carousel-image height-680' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgS9PyXDsfMzI_HFwpqns0rW_eeM2eoTg9nnmvW190TGYZGir9D61Mc1oOi1h_RXzsyHLyo1M7RzvNfDzpCjeL4tTxthQZNQQvrtRnCeKigP_7mtqGKSBCa_TfZjQ70ua5zAXIxmSlcY/s1600/Coffee+shop+closed-compressed.jpg);'>           <div class='header-carousel-caption'>             <span>               <h3 class='leader'>Orders Sent Thru Email.</h3>               <a class='btn btn-default btn-lg' href='#'>Checkout Now</a>             </span>           </div>         </div>         <div class='header-carousel-image height-680' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOGDODRhI8sG3rKToRZPhgqL8865CNu1T2E-FR2PZpzUmq0wdTLrl6aV43gkbuzo4KUL3g4JyaSnh31bDvOHYU7L8sjgDO6HpQTLw4QKTonOvgcuVucNdl5OWRtbmXAUjN9HS2O8pK_SI/s1600/picjumbo-compressed.jpg);'>           <div class='header-carousel-caption'>             <span>               <h3 class='leader'>Build More Quality Online Stores</h3>               <a class='btn btn-default btn-lg' href='#'>Customer Feedback</a>             </span>           </div>         </div>      </div> <!-- Image carousel slider ends --> To edit the displayed image slider, for each 'header-carousel-image' div class, edit at background-image:url(http://YOUR-UPLOADED-IMAGE-URL.jpg); To edit the click to action text, edit the text in between <h3 class='leader'>EDIT TEXT CLICK TO ACTION HERE</h3> To edit the click to action button, replace the # to your internal page and edit the text in between <a href="...'>EDIT TEXT TO DISPLAY</a>

Blogger store owners can also customise the image slider speed transitions by going to Template Editor, find HTML99 widget and expand <b:includable id='carousel-settings'> . The code below is self explanatory. Edit the integers to control your slider images transition effect. $('.header-carousel').slick({     dots: true,     infinite: true,     speed: 3000, // image transition speed in milliseconds     fade: true,     slide: 'div',     cssEase: 'linear',     autoplay: true,     autoplaySpeed: 3000, // image autoplay speed in milliseconds     pauseOnHover: false });