How to auto-switch images in mobile slider view with CSS?

Hello,

For the #shopify-section-1623276090444d7601, I set it up as a slider view. But I want the images to automatically change without clicking next on the mobile version. Is there anyone who knows how to do it through CSS code? Thank you for your help in advance.

Store URL: https://wowberrybites.myshopify.com/

Pass: berrybites

1 Like

@winnado11

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

can you please let me know which slider demo do you have used so i will check slider auto play its possible or note

@KetanKumar

Thank you for writing back. I am not sure what slider demo I have used because it was the featured function that is already in the Shopify theme that I work on. My theme is Expressed theme. Could you possibly inspect my theme code and see what kind of slider demo was used? Thank you for your help in advance.

@winnado11

sorry its not possible to this bt can you please share theme.js file i will try

@KetanKumar

Thank you for writing back. I attached the CSS code of theme.min.js here. Please take a look. Thanks for your help in advance.

!function(t,e){function n(t,e){let n;return(...i)=>{clearTimeout(n),n=setTimeout(()=>t.apply(this,i),e)}}function i(t){const e=t||theme.stylesheet;return void 0===this.stylesheetPromise&&(this.stylesheetPromise=new Promise(t=>{const n=document.querySelector(`link[href="${e}"]`);n.loaded&&t(),window.onloadCSS(n,function(){t()})})),this.stylesheetPromise}function s(t){const e=["webkitTransitionEnd","otransitionend","oTransitionEnd","msTransitionEnd","transitionend"],n=["WebkitTransition","MozTransition","OTransition","msTransition","transition"];let i=0,s=Promise.resolve();return n.forEach(()=>{i||(i=parseFloat(window.getComputedStyle(t).transitionDuration))}),i>0&&(s=new Promise(n=>{function i(e){e.target===t&&(s.forEach(({event:event,handler:handler})=>{t.removeEventListener(event,handler)}),n())}const s=e.map(e=>{return t.addEventListener(e,i),{event:e,handler:i}})})),s}function r(){let t=window.navigator.cookieEnabled;return t||(document.cookie="testcookie",t=document.cookie.indexOf("testcookie")!==-1),t}function o(t){const e=document.createElement("span");e.innerHTML=t.selectedOptions[0].label,document.querySelector(".footer").appendChild(e);const n=e.offsetWidth;e.remove(),t.style.width=`${n+50}px`}function a(){return"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype}function c(t,e="min"){return`(${e}-width: ${{medium:"46.85em",large:"61.85em",widescreen:"87.5em"}[t]})`}function d(){return JSON.parse(JSON.stringify({credentials:"same-origin",headers:{"X-Requested-With":"XMLHttpRequest","Content-Type":"application/json;"}}))}function l(t,e){return fetch(t,e).then(function(t){if(!t.ok)throw t;return t.json()})}function u(){return l("/cart.js",d())}function h(t){var e=d();return delete e.headers["Content-Type"],e.method="POST",e.body=t,l("/cart/add.js",e)}function m(t,e){var n=d();return e=e||{},n.method="POST",n.body=JSON.stringify({line:t,quantity:e.quantity,properties:e.properties}),l("/cart/change.js",n)}function p(t){var e=d();return e.method="POST",e.body=JSON.stringify(t),l("/cart/update.js",e)}function f(t){if("string"!=typeof t||2!==t.split(":").length)throw new TypeError("Theme Cart: Provided key value is not a string with the format xxx:xxx")}function g(t){if("number"!=typeof t||isNaN(t))throw new TypeError("Theme Cart: An object which specifies a quantity or properties value is required")}function y(t){if("number"!=typeof t||isNaN(t))throw new TypeError("Theme Cart: Variant ID must be a number")}function v(t){if("object"!=typeof t)throw new TypeError("Theme Cart: Properties must be an object")}function w(t){if(!(t instanceof HTMLFormElement))throw new TypeError("Theme Cart: Form must be an instance of HTMLFormElement")}function b(t){if("object"!=typeof t)throw new TypeError("Theme Cart: Options must be an object");if(void 0===t.quantity&&void 0===t.properties)throw new Error("Theme Cart: You muse define a value for quantity or properties");void 0!==t.quantity&&g(t.quantity),void 0!==t.properties&&v(t.properties)}function C(){return u()}function E(t){return f(t),u().then(function(e){var n=-1;return e.items.forEach(function(e,i){n=e.key===t?i+1:n}),n===-1?Promise.reject(new Error("Theme Cart: Unable to match line item with provided key")):n})}function S(t){w(t);var e=new FormData(t);return y(parseInt(e.get("id"),10)),h(e)}function L(t,e){return f(t),b(e),E(t).then(function(t){return m(t,e)})}function _(t){return p({note:t})}function T(){return p({note:""})}function I(){this.entries=[]}function k(t,e){return q(t),A(t,M(t,e))}function A(t,e){return q(t),H(e),t.variants.filter(function(t){return e.every(function(e,n){return t.options[n]===e})})[0]||null}function M(t,e){q(t),P(e);var n=[];return e.forEach(function(e){for(var i=0;i
1 Like

@winnado11

thanks for code i have cheeked sorry bt doesn’t allow modification

try this new slider

https://codepen.io/Turqueso/pen/rNNzpwb

@KetanKumar

Thank you so much for writing the code. I am wondering where/ which section to paste your suggested code on my theme code? Thank you.

1 Like

@winnado11

sorry for late reply you have generat new section code addd if are able code