带有边缘动画的图像滑块在屏幕调整大小时中断（未使用滑块插件）

Question

I am trying to create a fluid JQuery slider without using any sort of slider plugin and media queries (just CSS and jquery). 我正在尝试创建一个流畅的JQuery滑块，而不使用任何类型的滑块插件和媒体查询（仅CSS和jquery）。 Most solutions involve a slider plugin and media queries. 大多数解决方案都涉及滑块插件和媒体查询。 For educational purposes, I am trying to do without. 出于教育目的，我尝试不这样做。

I am using margin animation to move the slides (I don't know if it's the best approach to achieve the responsiveness). 我正在使用边距动画移动幻灯片（我不知道这是否是实现响应能力的最佳方法）。 Unfortunately, this is not responsive as the slide widths are fixed in the css. 不幸的是，由于幻灯片宽度固定在css中，因此无法响应。

please see code below for possible fix. 请参见下面的代码以获取可能的解决方法。 for the pictures, I just created a 650px by 350px rectangle on paint as placeholder. 对于图片，我刚刚在画板上创建了一个650px x 350px的矩形作为占位符。

<!DOCTYPE html>
<html>
    <head>
        <title>Slider</title>
        <style>
            *{
                margin: 0;padding: 0;
            }
            html{
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            *, *:before, *:after {
                -webkit-box-sizing: inherit;
                -moz-box-sizing: inherit;
                box-sizing: inherit;
            }
            .carousel{
                border: 2px solid #000;
                max-width: 650px;
                margin: 0 auto;
                overflow: hidden;
            }
            .carousel__canvas{
                width: 3900px;
            }
            .carousel__item{
                float: left;
                list-style-type: none; 
            }
            .carousel__item img{
                width: 100%
            }
        </style>
    </head>
    <body>
        <div class="carousel">
            <ul class="carousel__canvas">
                <li class="carousel__item"><img src="p1.png" alt="First Image"></li>
                <li class="carousel__item"><img src="p2.png" alt="Second Image"></li>
                <li class="carousel__item"><img src="p3.png" alt="Third Image"></li>
                <li class="carousel__item"><img src="p4.png" alt="Fourth Image"></li>
                <li class="carousel__item"><img src="p5.png" alt="Fifth Image"></li>
                <li class="carousel__item"><img src="p1.png" alt="First Image"></li>
            </ul>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var currentSlide = 1;
        var $carousel__item = $('.carousel__item');
        var numSlides = $carousel__item.length;
        var slideWidth = $carousel__item.width();
        var $viewport = $('.carousel');
        var $slideContainer = $viewport.find('.carousel__canvas');
        var $slide = $slideContainer.find('.carousel__item');
        var trasitionTime = 500;
        var slideViewTime = 3500;
        var interval;
        slideContainerWidth = slideWidth * numSlides;

        function startCarousel(){
            interval = setInterval(function(){
                if(numSlides>1){
                    $slideContainer.animate({'margin-left':'-='+slideWidth+'px'},     trasitionTime,function(){
                            if(++currentSlide === numSlides){
                                $slideContainer.animate({'margin-left':'0'},0);
                                currentSlide = 1;
                            }
                        });
                }
            },slideViewTime);
        }

        function stopCarousel(){
            clearInterval(interval);
        }

        $viewport.on('mouseover',stopCarousel).on('mouseleave', startCarousel);
        startCarousel();
    });
    </script>
</body>
</html>

Answer 1

Why use static width. 为什么要使用静态宽度。 You can use percentages always and an "height:auto" in css to make it responsive !!! 您可以始终使用百分比，并在CSS中使用“ height：auto”以使其具有响应性！

带有边缘动画的图像滑块在屏幕调整大小时中断（未使用滑块插件）

问题描述

1 个解决方案

解决方案1
0 2016-01-15 18:38:55

带有边缘动画的图像滑块在屏幕调整大小时中断（未使用滑块插件）

问题描述

1 个解决方案

解决方案1 0 2016-01-15 18:38:55

解决方案1
0 2016-01-15 18:38:55