Refactor Prettyblock image slider to Bootstrap #577
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| $('.prettyblocks-image-slider').each(function(){ | ||
| var $carousel = $(this); | ||
| if ($carousel.hasClass('prettyblocks-carousel-initialised')) { | ||
| return; | ||
| } | ||
| var $slides = $carousel.find('.carousel-item'); | ||
| if ($slides.length <= 1) { | ||
| $carousel.addClass('prettyblocks-carousel-initialised'); | ||
| return; | ||
| } | ||
| var autoplay = parseInt($slider.data('autoplay'), 10) === 1; | ||
| var autoplaySpeed = parseInt($slider.data('autoplaySpeed'), 10); | ||
| if (isNaN(autoplaySpeed) || autoplaySpeed < 0) { | ||
| var autoplay = parseInt($carousel.data('autoplay'), 10) === 1; | ||
| var autoplaySpeed = parseInt($carousel.data('autoplaySpeed'), 10); | ||
| if (isNaN(autoplaySpeed) || autoplaySpeed <= 0) { | ||
| autoplaySpeed = 5000; | ||
| } | ||
| var transitionSpeed = parseInt($slider.data('transitionSpeed'), 10); | ||
| if (isNaN(transitionSpeed) || transitionSpeed < 0) { | ||
| transitionSpeed = 500; | ||
| var transitionSpeed = parseInt($carousel.data('transitionSpeed'), 10); | ||
| if (!isNaN(transitionSpeed) && transitionSpeed > 0) { | ||
| $carousel.css('--prettyblocks-transition-speed', transitionSpeed + 'ms'); | ||
| } | ||
| var pauseOnHover = parseInt($carousel.data('pauseOnHover'), 10) !== 0 ? 'hover' : false; | ||
| var config = { | ||
| interval: autoplay ? autoplaySpeed : false, | ||
| pause: pauseOnHover, | ||
| ride: autoplay ? 'carousel' : false, | ||
| wrap: true, | ||
| keyboard: true, | ||
| touch: true | ||
| }; | ||
| try { | ||
| if (typeof bootstrap !== 'undefined' && typeof bootstrap.Carousel !== 'undefined') { | ||
| var existingInstance = bootstrap.Carousel.getInstance($carousel[0]); | ||
| if (existingInstance) { | ||
| existingInstance.dispose(); | ||
| } | ||
| var newInstance = new bootstrap.Carousel($carousel[0], config); | ||
| if (!autoplay && newInstance && typeof newInstance.pause === 'function') { | ||
| newInstance.pause(); | ||
| } | ||
| } else if (typeof $carousel.carousel === 'function') { | ||
| $carousel.carousel(config); | ||
| if (!autoplay) { | ||
| $carousel.carousel('pause'); | ||
| } | ||
| } | ||
| } catch (e) { | ||
| console.error('Prettyblocks carousel initialization failed', e); | ||
| } | ||
| var pauseOnHover = parseInt($slider.data('pauseOnHover'), 10) !== 0; | ||
| var showArrows = parseInt($slider.data('showArrows'), 10) === 1; | ||
| var showDots = parseInt($slider.data('showDots'), 10) === 1; | ||
| $slider.slick({ | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| autoplay: autoplay, | ||
| autoplaySpeed: autoplaySpeed, | ||
| speed: transitionSpeed, | ||
| arrows: showArrows, | ||
| dots: showDots, | ||
| adaptiveHeight: true, | ||
| pauseOnHover: pauseOnHover, | ||
| }); | ||
| $slider.addClass('slick-initialised'); | ||
| $carousel.addClass('prettyblocks-carousel-initialised'); | ||
| }); |
There was a problem hiding this comment.
The new Prettyblocks image slider is now implemented with Bootstrap, but its JavaScript initialisation still lives inside the if ($.fn.slick) block. On stores that drop the Slick dependency because this refactor no longer needs it, $().slick will be undefined and the entire block will be skipped, so no Bootstrap Carousel instance is created and options such as autoplay, pause-on-hover or keyboard navigation never activate. The initialisation of .prettyblocks-image-slider should run independently of Slick so that the slider works even when Slick is not loaded.
Useful? React with 👍 / 👎.
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68f74a0b51c08322a3cd82106ed7e120