Edit & Customize Image Carousel in Gallery Pages

BlogrCart Closet Blogger theme comes with 2 sets of responsive touch/mouse enabled image carousel powered by slick.js. The first set will be located on Product Pages, and the other on Gallery & Static Pages. This tutorial & code snippet explains the settings for the image carousel used in a blogger pages either than the Product Post pages. Both of the image carousel settings are using Google + Blogger API, a request callback to grab a blog content feed & display at a page. In order to minimize load & best optimisation practices, BlogrCart Closet theme only fetches the product image, price tag & product title. The image fetched are also scalable & very useful to set the width & height of displayed images within the carousel image container. Find below the location & settings built for the related image carousel in pages other than the Product Post pages below.

$ 25.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Codes & Instructions
• Carousel Settings

PRO Version In Blogger template editor, find <div id='footer-top'> which is located half way to the bottom of template codes. Above this code is the settings for the image carousel. This functions is requesting Google+Blogger API blog feed. <script>   //<![CDATA[   var numProducts = 8; // nos of product image to render   var showProductTitle = true; // set to true to display product title   var productTitleLength = 35; // if showProductTitle, set the product title length   var showProductImage = true; // set to true to display product images   var image_size = 240; // if showProductImage, set the max product image size in pixels   var display_button = true; // set to true to display button   var button_text = 'View Now'; // if Display_button, set text to display for product button   var showProductSummary = false; // set to true to display product summary   var numProductSummaryChars = 120; // if showpostummary true, set nos of chars to display   var showProductPrice = true;   // set to true to show product price   var currency_after = false; // if showProductPrice, set to true to place currency after price   var currency = "RM"; // if showProductPrice, set the currency   var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed   //]]> </script> The snippet above are self explanatory. Edit to your requirement. In addition, the images (& products) is displayed according to the respective Labels set for easy categorisation. Edit the Label tag at the highlighted code snippet below:- <script expr:src='&quot;/feeds/posts/default/-/Features?published&amp;alt=json-in-script&amp;callback=productDisplay&quot;' type='text/javascript'/> The text is case sensitive & spaces are replaced with %20. Edit to your preferred Label of choice. Example product post must be published with assigned Label in order to initiate the image carousel. Freemium Version Freemium theme has a much simplified code settings to see how this plug-in works & for test purposes. Below are the example settings codes:- <script>   //<![CDATA[   var numProducts = 8; // nos of product image to render   var showProductSummary = true; // set to true to display product summary   var numProductSummaryChars = 120; // if showpostummary true, set nos of chars to display   var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed   //]]> </script> Edit to personal requirement. Editing the required product post to display by Labels is using the same features as above.

Due to the touch/swipe enabled image carousel responsive behaviour, users can set the image transition duration, auto pagination timing & the amount of products to display & cycle through. At template editor, use Jump To Widget, select HTML99 & find this code <b:includable id='carousel-settings'>, expand the code to view the detail settings. An example would look like so:- <script> //<![CDATA[ $(function(){   $('.related-products').slick({     dots: true,     infinite: true, // Image transition in milliseconds     speed: 300,     slidesToShow: 6,   // Nos of products to show     slidesToScroll: 2, // Nos of product to cycle     autoplay: true,     autoplaySpeed: 3000, // autoplay speed transition in milliseconds     responsive: [       {         breakpoint: 1024,         settings: {           slidesToShow: 3,           slidesToScroll: 3,           infinite: true,           dots: true         }       },       {         breakpoint: 600,         settings: {           slidesToShow: 2,           slidesToScroll: 2         }       },       {         breakpoint: 480,         settings: {           slidesToShow: 1,           slidesToScroll: 1         }       }     ]   }); }); //]]> </script> Comments & indicators included. Edit to your requirement. The settings above shares the same settings for the related product image carousel located in Product Post pages.