{"id":21397,"date":"2015-03-24T09:35:38","date_gmt":"2015-03-24T09:35:38","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=21397"},"modified":"2025-11-26T05:40:39","modified_gmt":"2025-11-26T05:40:39","slug":"cs-cart-accordion-slider","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/","title":{"rendered":"CS-Cart Accordion Slider"},"content":{"rendered":"<p><a href=\"https:\/\/store.webkul.com\/Cs-Cart-Accordion-Slider.html\" target=\"_blank\" rel=\"noopener\">CS-Cart Accordion Slider<\/a> lets you attractively display slideshows using various themes and effects.<\/p>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"35d10c98-8c30-4641-b78d-54964d2ccf97\" data-testid=\"conversation-turn-166\" data-scroll-anchor=\"false\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"35d10c98-8c30-4641-b78d-54964d2ccf97\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"105\" data-is-last-node=\"\" data-is-only-node=\"\">You can display the product name, category name, or a custom title with a clickable image for each slide.<\/p>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"506ee8b7-c019-45f2-89f6-39e058b52e81\" data-testid=\"conversation-turn-168\" data-scroll-anchor=\"false\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"506ee8b7-c019-45f2-89f6-39e058b52e81\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"88\" data-is-last-node=\"\" data-is-only-node=\"\">You can select background colors for banners and headings, and also add icons as needed.<\/p>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Check the overview of the module CS-Cart Accordion Slider<\/h3>\n<\/div>\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video wk-block-yt-classic components-placeholder\">\n<div class=\"wk-block--yt-video-frame\">\n<div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"pzA1PPeNEd0\">\n<div class=\"components-placeholder__instructions\">pzA1PPeNEd0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\"><i class=\"fa fa-mail-forward\"><\/i>Features<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<ul>\n<li data-start=\"96\" data-end=\"143\">\n<p data-start=\"98\" data-end=\"143\">Works seamlessly across all major browsers.<\/p>\n<\/li>\n<li data-start=\"96\" data-end=\"143\">\n<p data-start=\"98\" data-end=\"143\">Fully configurable from the admin panel.<\/p>\n<\/li>\n<li data-start=\"189\" data-end=\"264\">\n<p data-start=\"191\" data-end=\"264\">Features a responsive accordion design that adapts to all screen sizes.<\/p>\n<\/li>\n<li data-start=\"265\" data-end=\"326\">\n<p data-start=\"267\" data-end=\"326\">Offers multiple slideshow themes for a personalized look.<\/p>\n<\/li>\n<li data-start=\"327\" data-end=\"385\">\n<p data-start=\"329\" data-end=\"385\">Includes various transition effects for smooth slides.<\/p>\n<\/li>\n<li data-start=\"386\" data-end=\"441\">\n<p data-start=\"388\" data-end=\"441\">Allows enabling or disabling of autoplay as needed.<\/p>\n<\/li>\n<li data-start=\"442\" data-end=\"556\">\n<p data-start=\"444\" data-end=\"556\">Let&#8217;s you set slide titles using product names, category names, or custom text with images and gradient colors.<\/p>\n<\/li>\n<li data-start=\"557\" data-end=\"615\">\n<p data-start=\"559\" data-end=\"615\">Enables adding background colors or images to banners.<\/p>\n<\/li>\n<li data-start=\"616\" data-end=\"684\">\n<p data-start=\"618\" data-end=\"684\">Allows customizing heading colors for better design consistency.<\/p>\n<\/li>\n<li data-start=\"685\" data-end=\"740\" data-is-last-node=\"\">\n<p data-start=\"687\" data-end=\"740\" data-is-last-node=\"\">Supports adding icons to enhance visual presentation.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"panel panel-primary\">\n<div class=\"panel-heading\">\n<h3 class=\"panel-title\"><i class=\"fa fa-mail-forward\"><\/i>Video Tutorial<\/h3>\n<\/div>\n<div class=\"panel-body\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe src=\"https:\/\/www.youtube.com\/embed\/ZZrNSpZaIfg\" width=\"854\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" loading=\"lazy\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-success\">\n<div class=\"panel-body\">\n<div class=\"panel-heading\">\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Installation<\/h3>\n<\/div>\n<\/div>\n<div class=\"panel-body\">\n<p>After downloading\u00a0the\u00a0<strong>CS-Cart<\/strong> <strong>Accordian Slider<\/strong> add-on, you\u2019ll get one zip file, one install.txt file, and a relevant User Guide manual doc.<\/p>\n<p>Please read it carefully for proper configuration.<\/p>\n<p>Go to Manage Add-ons, and click on\u00a0<strong>\u201cManual Installation\u201d<\/strong>\u00a0as shown below in the snapshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-511562\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/01-manual-installation.webp\" alt=\"CS-Cart Manual installation of the addon\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/01-manual-installation.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/01-manual-installation-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/01-manual-installation-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/01-manual-installation-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<p>Click on<strong>\u00a0\u201cLocal\u201d<\/strong>\u00a0to browse the zip file, and then click on\u00a0<strong>\u201cUpload &amp; Install\u201d<\/strong>\u00a0as shown below in the snapshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-511566\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/02-upload-and-install.webp\" alt=\"CS-Cart installation of the addon\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/02-upload-and-install.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/02-upload-and-install-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/02-upload-and-install-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/02-upload-and-install-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-heading\">\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Module Configuration | Admin<\/h3>\n<\/div>\n<p>To configure the module, go to\u00a0the\u00a0<strong>Add-Ons<\/strong>\u00a0&gt;&gt;\u00a0<strong>Developers<\/strong>\u00a0&gt;&gt;\u00a0<strong>Webkul Software Pvt Ltd<\/strong>.\u00a0<strong>&gt;&gt; Accordian Slider<\/strong>\u00a0<strong>&gt;&gt;<\/strong>\u00a0<strong>Settings<\/strong><\/p>\n<\/div>\n<div class=\"panel-body\">\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-511582\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-accordian-configuration-1.webp\" alt=\"CS-Cart Accordian Slider Configuration\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-accordian-configuration-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-accordian-configuration-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-accordian-configuration-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-accordian-configuration-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-1\" data-testid=\"conversation-turn-174\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"7b32a947-23a6-4a8e-8f0d-0a173b423a06\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<ul>\n<li data-start=\"0\" data-end=\"71\"><strong data-start=\"0\" data-end=\"10\" data-is-only-node=\"\">Width:<\/strong> Set the banner&#8217;s width according to your layout preferences.<\/li>\n<li data-start=\"61\" data-end=\"126\">\n<p data-start=\"63\" data-end=\"126\"><strong data-start=\"63\" data-end=\"79\">Slide Speed:<\/strong> Choose the speed at which slides transition.<\/p>\n<\/li>\n<li data-start=\"127\" data-end=\"206\">\n<p data-start=\"129\" data-end=\"206\"><strong data-start=\"129\" data-end=\"145\">First Slide:<\/strong> Select the slide that should appear first in the sequence.<\/p>\n<\/li>\n<li data-start=\"207\" data-end=\"291\">\n<p data-start=\"209\" data-end=\"291\"><strong data-start=\"209\" data-end=\"228\">Pause on Hover:<\/strong> Enable this option to pause the slideshow when hovered over.<\/p>\n<\/li>\n<li data-start=\"292\" data-end=\"363\" data-is-last-node=\"\">\n<p data-start=\"294\" data-end=\"363\" data-is-last-node=\"\"><strong data-start=\"294\" data-end=\"308\">Auto Play:<\/strong> Turn this on to make the slideshow play automatically.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Slide Creation<\/h3>\n<\/div>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-3\" data-testid=\"conversation-turn-178\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"d540d22d-a389-4955-9a6a-adc87d09f667\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"75\" data-is-last-node=\"\" data-is-only-node=\"\">To create a slider, navigate to <strong data-start=\"32\" data-end=\"55\">Website \u2192 Accordion<\/strong> in the admin panel.<\/p>\n<p data-start=\"0\" data-end=\"75\" data-is-last-node=\"\" data-is-only-node=\"\"><img decoding=\"async\" class=\"alignnone size-full wp-image-511596\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-1.webp\" alt=\"CS-Cart Add Slides\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<ul>\n<li data-start=\"72\" data-end=\"155\">\n<p data-start=\"74\" data-end=\"155\"><strong data-start=\"74\" data-end=\"94\">Select Category:<\/strong> Pick the categories you want to showcase in the slideshow.<\/p>\n<\/li>\n<li data-start=\"156\" data-end=\"237\">\n<p data-start=\"158\" data-end=\"237\"><strong data-start=\"158\" data-end=\"177\">Select Product:<\/strong> Choose specific products to feature in the slide display.<\/p>\n<\/li>\n<li data-start=\"238\" data-end=\"330\">\n<p data-start=\"240\" data-end=\"330\"><strong data-start=\"240\" data-end=\"258\">Select Custom:<\/strong> Enter your preferred custom title or content to display in the slide.<\/p>\n<\/li>\n<li data-start=\"331\" data-end=\"422\">\n<p data-start=\"333\" data-end=\"422\"><strong data-start=\"333\" data-end=\"353\">Background Type:<\/strong> Choose either an image or your preferred color for the background.<\/p>\n<\/li>\n<li data-start=\"423\" data-end=\"485\" data-is-last-node=\"\">\n<p data-start=\"425\" data-end=\"485\" data-is-last-node=\"\"><strong data-start=\"425\" data-end=\"444\">Accordion Icon:<\/strong> Select an icon to display on the banner.<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-511599\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-configurations.webp\" alt=\"CS-Cart Add Slides Configurations\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-configurations.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-configurations-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-configurations-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-slides-configurations-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<ul>\n<li data-start=\"65\" data-end=\"132\">\n<p data-start=\"67\" data-end=\"132\"><strong data-start=\"67\" data-end=\"78\">Status:<\/strong> Select the status to activate or disable the slide.<\/p>\n<\/li>\n<li data-start=\"133\" data-end=\"210\">\n<p data-start=\"135\" data-end=\"210\"><strong data-start=\"135\" data-end=\"149\">Use Title:<\/strong> Enable this option to display the title in the slide list.<\/p>\n<\/li>\n<li data-start=\"211\" data-end=\"262\">\n<p data-start=\"213\" data-end=\"262\"><strong data-start=\"213\" data-end=\"231\">Image Caption:<\/strong> Add a caption for the image.<\/p>\n<\/li>\n<li data-start=\"263\" data-end=\"341\">\n<p data-start=\"265\" data-end=\"341\"><strong data-start=\"265\" data-end=\"284\">Caption Status:<\/strong> Activate this option to display captions on the slide.<\/p>\n<\/li>\n<li data-start=\"342\" data-end=\"425\">\n<p data-start=\"344\" data-end=\"425\"><strong data-start=\"344\" data-end=\"359\">Image Link:<\/strong> Provide a link to redirect users to the desired page or add-on.<\/p>\n<\/li>\n<li data-start=\"426\" data-end=\"483\">\n<p data-start=\"428\" data-end=\"483\"><strong data-start=\"428\" data-end=\"447\">Banner Heading:<\/strong> Enter the heading for the banner.<\/p>\n<\/li>\n<li data-start=\"484\" data-end=\"552\">\n<p data-start=\"486\" data-end=\"552\"><strong data-start=\"486\" data-end=\"511\">Banner Heading Color:<\/strong> Choose a color for the banner heading.<\/p>\n<\/li>\n<li data-start=\"553\" data-end=\"623\" data-is-last-node=\"\">\n<p data-start=\"555\" data-end=\"623\" data-is-last-node=\"\"><strong data-start=\"555\" data-end=\"572\">Bullet Point:<\/strong> List the key features or highlights of the add-on.<\/p>\n<\/li>\n<\/ul>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-9\" data-testid=\"conversation-turn-190\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"7cacdcd5-472b-4738-807f-6fd613edb908\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"63\" data-is-last-node=\"\" data-is-only-node=\"\">After creating the banner, you can edit or delete it as needed.<\/p>\n<p data-start=\"0\" data-end=\"63\" data-is-last-node=\"\" data-is-only-node=\"\">The admin can also perform bulk actions on slides, such as deleting, disabling, or activating multiple slides at once.<\/p>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Layout Setting<\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"7dd91c36-6109-4d46-a77f-f2582a049cea\" data-testid=\"conversation-turn-194\" data-scroll-anchor=\"false\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"a983d527-5dc2-49f2-880e-449d1243b884\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"77\" data-is-last-node=\"\" data-is-only-node=\"\">To configure the layout, navigate to <strong data-start=\"37\" data-end=\"57\">Website &gt;&gt; Themes<\/strong> in the admin panel.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto scroll-mt-(--header-height)\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"535b602f-b5d6-4c12-be92-05a48ab433fc\" data-testid=\"conversation-turn-195\" data-scroll-anchor=\"false\" data-turn=\"user\">\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-14\" data-testid=\"conversation-turn-196\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"1b208566-6855-4ee8-b151-a4d016c2da20\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"53\" data-is-last-node=\"\" data-is-only-node=\"\">Select <strong data-start=\"7\" data-end=\"17\">Layout<\/strong> to add a new layout for the slider, and choose the position where you want to place it on the page.<\/p>\n<p data-start=\"0\" data-end=\"53\" data-is-last-node=\"\" data-is-only-node=\"\"><img decoding=\"async\" class=\"alignnone size-full wp-image-511691\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-layout-add.webp\" alt=\"CS-Cart layout add for Accordian Slider\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-layout-add.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-layout-add-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-layout-add-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-layout-add-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"z-0 flex min-h-[46px] justify-start\"><\/div>\n<div class=\"mt-3 w-full empty:hidden\">\n<div class=\"text-center\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"pointer-events-none h-px w-px\" aria-hidden=\"true\" data-edge=\"true\">\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-17\" data-testid=\"conversation-turn-202\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"668fa13e-bdb4-4f25-abfa-cede7a7a5eb2\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"64\" data-is-last-node=\"\" data-is-only-node=\"\">Click on <strong data-start=\"9\" data-end=\"22\">Add Block<\/strong> to create and add a block for the banner.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"z-0 flex min-h-[46px] justify-start\"><img decoding=\"async\" class=\"alignnone size-full wp-image-511695\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-accordian-template.webp\" alt=\"CS-Cart add template for Accordian\" width=\"1120\" height=\"880\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-accordian-template.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-accordian-template-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-accordian-template-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/cs-cart-add-accordian-template-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/div>\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"mt-3 w-full empty:hidden\">\n<div class=\"text-center\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"pointer-events-none h-px w-px\" aria-hidden=\"true\" data-edge=\"true\">\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-18\" data-testid=\"conversation-turn-204\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"69dc597b-9768-4f3d-89b4-cccbc6285f06\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"65\" data-is-last-node=\"\" data-is-only-node=\"\">Then create a new block and choose <strong data-start=\"35\" data-end=\"48\">Accordion<\/strong> as the <strong>template<\/strong>.<\/p>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Front End<\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/div>\n<div class=\"panel panel-info\">\n<div class=\"panel-body\">\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-20\" data-testid=\"conversation-turn-208\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"e622ab73-26c4-48e1-af9a-f57b139fa51b\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"100\" data-is-last-node=\"\" data-is-only-node=\"\">The banners are visible on the storefront, allowing customers to view them directly on the frontend.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-511710\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/frontend-view-of-banner-2.webp\" alt=\"CS-Cart frontend view of the banner\" width=\"1120\" height=\"679\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/frontend-view-of-banner-2.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/frontend-view-of-banner-2-300x182.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/frontend-view-of-banner-2-250x152.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/frontend-view-of-banner-2-768x466.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/p>\n<div class=\"panel-body\">\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" tabindex=\"-1\" data-turn-id=\"request-68f9eb5c-af18-8323-8be8-155cf38194cc-19\" data-testid=\"conversation-turn-206\" data-scroll-anchor=\"true\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\" tabindex=\"-1\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"fe68b14c-fb49-4202-88e8-f247fe0e758e\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\">\n<p data-start=\"0\" data-end=\"49\" data-is-last-node=\"\" data-is-only-node=\"\">Customers can view the banners on the storefront.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<div class=\"wk-index-wrap\">\n<h3 class=\"index-title\">Support<\/h3>\n<\/div>\n<p>If you have any questions, suggestions, or customization requests, feel free to contact us at\u00a0<a href=\"mailto:support@webkul.com\" target=\"_blank\" rel=\"noreferrer noopener\">support@webkul.com<\/a>\u00a0or submit a ticket at\u00a0<a class=\"wk-external-link\" href=\"http:\/\/webkul.uvdesk.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow external\" data-wpel-link=\"external\">webkul.uvdesk.com.<\/a><\/p>\n<p>Explore our premium-quality\u00a0<a href=\"https:\/\/store.webkul.com\/CS-Cart.html\" target=\"_blank\" rel=\"noreferrer noopener\" data-wpel-link=\"internal\">CS Cart Extensions<\/a>\u00a0to enhance your store functionality.<\/p>\n<p>You can also explore our\u00a0<a href=\"https:\/\/webkul.com\/cs-cart-development\/\" target=\"_blank\" rel=\"noreferrer noopener\" data-wpel-link=\"internal\">CS-Cart Development Services<\/a>\u00a0and\u00a0<a class=\"wk-external-link\" href=\"https:\/\/marketplace.cs-cart.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow external\" data-wpel-link=\"external\">Quality\u00a0CS-Cart add-ons<\/a>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CS-Cart Accordion Slider lets you attractively display slideshows using various themes and effects. You can display the product name, category name, or a custom title with a clickable image for each slide. You can select background colors for banners and headings, and also add icons as needed. Check the overview of the module CS-Cart Accordion <a href=\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":42,"featured_media":21985,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1496,78,251,198,79,13,924],"tags":[1701,1700,83,1482,119],"class_list":["post-21397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cs-cart","category-css3","category-html5","category-javascript","category-jquery","category-php","category-responsive","tag-banner","tag-cs-cart-accordion-slider","tag-jquery-2","tag-responsive-2","tag-slider"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cs-Cart Accordion Slider<\/title>\n<meta name=\"description\" content=\"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cs-Cart Accordion Slider\" \/>\n<meta property=\"og:description\" content=\"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/SwEr.vivekgupta\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-24T09:35:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-26T05:40:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vivek Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/vivekgupta_\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vivek Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\"},\"author\":{\"name\":\"Vivek Gupta\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e47e5e72962da6f183e1d32fd39a21d2\"},\"headline\":\"CS-Cart Accordion Slider\",\"datePublished\":\"2015-03-24T09:35:38+00:00\",\"dateModified\":\"2025-11-26T05:40:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\"},\"wordCount\":630,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png\",\"keywords\":[\"Banner\",\"Cs-Cart Accordion Slider\",\"jquery\",\"Responsive\",\"slider\"],\"articleSection\":[\"Cs Cart\",\"CSS3\",\"html5\",\"JavaScript\",\"jQuery\",\"php\",\"responsive\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\",\"url\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\",\"name\":\"Cs-Cart Accordion Slider\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png\",\"datePublished\":\"2015-03-24T09:35:38+00:00\",\"dateModified\":\"2025-11-26T05:40:39+00:00\",\"description\":\"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CS-Cart Accordion Slider\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e47e5e72962da6f183e1d32fd39a21d2\",\"name\":\"Vivek Gupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0a87523899d945c0dfaa893574f103105260e07dc779e8487ec322cf9134254?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0a87523899d945c0dfaa893574f103105260e07dc779e8487ec322cf9134254?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Vivek Gupta\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SwEr.vivekgupta\",\"https:\/\/www.linkedin.com\/in\/vivekgpt\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/vivekgupta_\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/vivek753\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cs-Cart Accordion Slider","description":"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/","og_locale":"en_US","og_type":"article","og_title":"Cs-Cart Accordion Slider","og_description":"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.","og_url":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_author":"https:\/\/www.facebook.com\/SwEr.vivekgupta","article_published_time":"2015-03-24T09:35:38+00:00","article_modified_time":"2025-11-26T05:40:39+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png","type":"image\/png"}],"author":"Vivek Gupta","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/vivekgupta_","twitter_site":"@webkul","twitter_misc":{"Written by":"Vivek Gupta","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/"},"author":{"name":"Vivek Gupta","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e47e5e72962da6f183e1d32fd39a21d2"},"headline":"CS-Cart Accordion Slider","datePublished":"2015-03-24T09:35:38+00:00","dateModified":"2025-11-26T05:40:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/"},"wordCount":630,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png","keywords":["Banner","Cs-Cart Accordion Slider","jquery","Responsive","slider"],"articleSection":["Cs Cart","CSS3","html5","JavaScript","jQuery","php","responsive"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/","url":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/","name":"Cs-Cart Accordion Slider","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png","datePublished":"2015-03-24T09:35:38+00:00","dateModified":"2025-11-26T05:40:39+00:00","description":"Cs-Cart Accordion Slider is an Addon that helps display slideshow with many themes and effects.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2015\/03\/CS-Cart-Accordion-Slider-Blog-Post-Banner.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/cs-cart-accordion-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CS-Cart Accordion Slider"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e47e5e72962da6f183e1d32fd39a21d2","name":"Vivek Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0a87523899d945c0dfaa893574f103105260e07dc779e8487ec322cf9134254?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0a87523899d945c0dfaa893574f103105260e07dc779e8487ec322cf9134254?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Vivek Gupta"},"sameAs":["https:\/\/www.facebook.com\/SwEr.vivekgupta","https:\/\/www.linkedin.com\/in\/vivekgpt\/","https:\/\/x.com\/https:\/\/twitter.com\/vivekgupta_"],"url":"https:\/\/webkul.com\/blog\/author\/vivek753\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/21397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=21397"}],"version-history":[{"count":115,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/21397\/revisions"}],"predecessor-version":[{"id":514551,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/21397\/revisions\/514551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/21985"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=21397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=21397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=21397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}