Question

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

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

我正在尝试修改的index.html位于iosslider_demos_examples \ 9-Full-Width-Responsive-Height \ 3-variable-width \ folder。

以下是代码的原始部分：

                <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>

一旦我这样做，滑块就不再正常工作了。我怀疑我需要修改滑块的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')
		});
	});

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

1 个答案: