1 Тема від serhi11

  • serhi11
  • serhi11
  • Користувач
  • Поза форумом
  • Дата реєстрації: 25.06.2012
  • Повідомлень: 89
    • Репутація: 10

Тема: Резиновий слайдер

Як зробити резиновий слайдер

2 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: Резиновий слайдер

А можете ширше пояснити, що ви маєте під цим на увазі?

3 Відповідь від Blast

  • Blast
  • Blast
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.01.2014
  • Повідомлень: 1 099
    • Репутація: 156

Re: Резиновий слайдер

Дивись в сторону каруселі від бутстрап

4 Відповідь від serhi11

  • serhi11
  • serhi11
  • Користувач
  • Поза форумом
  • Дата реєстрації: 25.06.2012
  • Повідомлень: 89
    • Репутація: 10

Re: Резиновий слайдер

Треба так, щоб слайдер розтягувався по ширині екрана, як резинові сайти.
Ось код слайдера..

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-1.10.2.min.js"></script>

    <style>
        #slider {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            padding: 5px;
            box-shadow: 0 0 3px 0 #888;            
        }
        .wrapper {
            overflow: hidden;
            position: relative;
        }
        #slider ul {
            width: 9999px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #slider ul li {
            float: left;
        }
        .nav {
            position: absolute;
            bottom: 10px;        
            left: 10px;    
        }
        .nav span {            
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #EFEFEF;
            margin: 0 3px;
            border-radius: 5px;
        }
        .nav span:hover, .nav span.active {
            background: #008080;
        }
    </style>

    <script>
        $(document).ready(function(){
            // вибираємо блок slider
            var slider = $("#slider"); 

            // додаємо кнопочки навігації
            slider.find(".wrapper").append("<div class='nav'></div>");
            slider.find(".wrapper ul li").each(function(index){
                slider.find(".nav").append("<span id='" + index + "'></span>");
            });

            // робимо першу кнопочку активною
            slider.find(".nav span:first").addClass("active");

            // показ слайдів
            slider.find(".nav span").click(function(){
                // видаляємо клас active у активної кнопки, і додаємо поточній кнопці
                slider.find(".nav span.active").removeClass("active");
                $(this).addClass("active");

                // получаємо розмір слайду
                var widthSlide = slider.find(".wrapper ul li img").width();

                // получаємо id поточної кнопки
                var idSpan = Number($(this).attr("id"));

                // переключаємо слайд
                slider.find(".wrapper ul").animate({marginLeft: "-" + widthSlide * idSpan + "px"}, 500);
            });
        });        
    </script>
</head>
<body>

<div id="slider">
    <div class="wrapper">
        <ul>
            <li><img src="http://lorempixel.com/500/200/nightlife/" alt=""></li>
            <li><img src="http://lorempixel.com/500/200/sports/" alt=""></li>
            <li><img src="http://lorempixel.com/500/200/animals/" alt=""></li>
            <li><img src="http://lorempixel.com/500/200/nature/" alt=""></li>
            <li><img src="http://lorempixel.com/500/200/city/" alt=""></li>
        </ul>        
    </div>    
</div>

</body>
</html>

5 Відповідь від Ярослав Востаннє редагувалося Ярослав (10.07.2014 15:13:31)

  • Ярослав
  • Гість

Re: Резиновий слайдер

Треба вказувати значення ширини і висоти у відсотках для елементу <div id="slide">.
Для того, щоб ці властивості застосовувались, то треба використовувати class, замість id. Я погано знаю JavaScript, тому не можу на разі вирішити вашу задачу до кінця, але ось декілька кроків в цьому напрямку:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery-1.js"></script>
         
        <style>
        html, body {
            height: 100%;
        }

        .slider {
            width: 64%;
                    min-width: 500px;
            height: 36%;
            margin: 0 auto;
            padding: 5px;
            box-shadow: 0 0 3px 0 #888;
        }
        .wrapper {
            overflow: hidden;
            position: relative;
        }
        #slider ul {
            width: 9999px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #slider ul li {
            float: left;
        }
        .nav {
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
        .nav span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #EFEFEF;
            margin: 0 3px;
            border-radius: 5px;
        }
        .nav span:hover, .nav span.active {
            background: #008080;
        }
        </style>
         
        <script>
        $(document).ready(function(){
        // вибираємо блок slider
        var slider = $("#slider");
         
        // додаємо кнопочки навігації
        slider.find(".wrapper").append("<div class='nav'></div>");
        slider.find(".wrapper ul li").each(function(index){
        slider.find(".nav").append("<span id='" + index + "'></span>");
        });
         
        // робимо першу кнопочку активною
        slider.find(".nav span:first").addClass("active");
         
        // показ слайдів
        slider.find(".nav span").click(function(){
        // видаляємо клас active у активної кнопки, і додаємо поточній кнопці
        slider.find(".nav span.active").removeClass("active");
        $(this).addClass("active");
         
        // получаємо розмір слайду
        var widthSlide = slider.find(".wrapper ul li img").width();
         
        // получаємо id поточної кнопки
        var idSpan = Number($(this).attr("id"));
         
        // переключаємо слайд
        slider.find(".wrapper ul").animate({marginLeft: "-" + widthSlide * idSpan + "px"}, 500);
        });
        });
        </script>
    </head>
    <body>
         
        <div id="slider" class="slider">
            <div class="wrapper">
                <ul>
                    <li><img src="http://lorempixel.com/500/200/nightlife/" alt=""></li>
                    <li><img src="http://lorempixel.com/500/200/sports/" alt=""></li>
                    <li><img src="http://lorempixel.com/500/200/animals/" alt=""></li>
                    <li><img src="http://lorempixel.com/500/200/nature/" alt=""></li>
                    <li><img src="http://lorempixel.com/500/200/city/" alt=""></li>
                </ul>
            </div>
        </div>
         
    </body>
    </html>

Думаю треба йти таким шляхом:
Мінімальний розмір картинки 500*200, мінімальний розмір вікна слайдеру 500*200, для початку не міняти розмір картинки, а лише центрувати її відносно вікна слайдеру, а саме вікно слайдеру трансформувати у відповідності до розміру вікна броузеру, за допомогою задавання властивостей width та height у відсотках.

6 Відповідь від serhi11 Востаннє редагувалося serhi11 (11.07.2014 11:52:57)

  • serhi11
  • serhi11
  • Користувач
  • Поза форумом
  • Дата реєстрації: 25.06.2012
  • Повідомлень: 89
    • Репутація: 10

Re: Резиновий слайдер

Дякую за пораду........знайшов скрипт на тому сайті
http://www.rudebox.org.ua/simple-adapti … -a-jquery/