html - 响应式设计的 iosSlider css 设置问题

Question

我下载了 iosSlider 演示并尝试修改其中一个示例。

iosSlider - https://iosscripts.com/iosslider/按大红色按钮下载演示。

我要修改的 index.html 位于 iosslider_demos_examples\9-Full-Width-Responsive-Height\3-variable-width\文件夹中。

这是之前的原始代码部分:

                <div class = 'slider'>

                    <img src = 'http://placehold.it/400x400/ff00cc/' />
                    <img src = 'http://placehold.it/300x400/ffcc00/' />
                    <img src = 'http://placehold.it/200x400/ccff00/' />
                    <img src = 'http://placehold.it/400x400/cc00ff/' />
                    <img src = 'http://placehold.it/100x400/00ccff/' />
                    <img src = 'http://placehold.it/500x400/00ffcc/' />

                </div>

这是我修改它并添加带有类的 DIV 元素后的样子:

                <div class = 'slider'>

                    <div class = 'item'>
                        <img src = 'http://placehold.it/400x500/ff00cc/' />
                    </div>
                    <div class = 'item'>
                        <img src = 'http://placehold.it/300x400/ffcc00/' />
                    </div>
                    <div class = 'item'>
                        <img src = 'http://placehold.it/200x400/ccff00/' />
                    </div>
                    <div class = 'item'>
                        <img src = 'http://placehold.it/400x400/cc00ff/' />
                    </div>
                    <div class = 'item'>
                        <img src = 'http://placehold.it/100x400/00ccff/' />
                    </div>
                    <div class = 'item'>
                        <img src = 'http://placehold.it/500x400/00ffcc/' />
                    </div>

                </div>

一旦我这样做了， slider 就不再正常工作了。我怀疑我需要修改 slider 的 CSS，但我不知道如何修改。有什么建议吗？

如果您有任何想法，请告诉我。我将不胜感激。

Answer 1

你是通过 JS 启动插件的吗？像这个例子:

jQuery(document).ready(function($) {
		/* items_slider */
		$('.slider-marcas .gbtr_items_slider').iosSlider({
			snapToChildren: true,
			desktopClickDrag: true,
			scrollbar: true,
			scrollbarHide: true,
			scrollbarLocation: 'bottom',
			scrollbarHeight: '2px',
			scrollbarBackground: '#ccc',
			scrollbarBorder: '0',
			scrollbarMargin: '0',
			scrollbarOpacity: '1',
			navNextSelector: $('.slider-marcas .gbtr_items_sliders_nav .big_arrow_right'),
			navPrevSelector: $('.slider-marcas .gbtr_items_sliders_nav .big_arrow_left')
		});
	});