Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 30.09.2016, 15:27
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

РОНИ, все слайдеры которые я нашел, слишком громоздкие, с дополнительными фичами. Мне нужен простой перелистователь, я пробовал брать готовые, но они очень криво встают, то DIV летают как попало, то сценарии косячат.

Все что ты мне написал меня устраивает, просто кнопки ну очень нужны)))
Ответить с цитированием
  #12 (permalink)  
Старый 30.09.2016, 15:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,605

бесконечная прокрутка слайдера на jquery с кнопками, макет
insaidd,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .slider li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;

  }
 .slider .carusel {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  .slider{
     overflow:hidden; width: 200px; height:50px; position: relative;  margin: 100px auto;
  }


 .prev, .next{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #DCDCDC;
    top: 10px;
    left: 0;
    border-radius: 50%;
    opacity: .3;
    cursor: pointer;
 }
.next{
  left: 180px;
}
.slider:hover .prev,.slider:hover .next{
  opacity: 1;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

  $(function() {
    var ul = $(".carusel"),
        widthAll = 0,
        loop = true,
        pause = 2000,
        spide = 1200,
        next = false;
    $("li", ul).each(function(indx, element) {
        widthAll += this.offsetWidth
    });
    ul.width(widthAll);

    function go() {
        var li = next ? $("li:last", ul) : $("li:first", ul),
            w = li.width();
        next && (ul.prepend(li).css({
            left: -w
        }), w = 0);
        ul.delay(pause).animate({
            left: -w
        }, spide, function() {
            !next && ul.append(li).css({
                left: 0
            });
            loop && go()
        })
    }
    go();
    $(".slider").on("mouseenter", function() {
        loop = false;
        ul.stop()
    }).on("mouseleave", function() {
        ul.stop();
        loop = true;
        pause = 2000;
        spide = 1200;
        go()
    }).on("click", ".prev, .next", function() {
        pause = 0;
        spide = 800;
        next = $(this).is(".next");
        go()
    })
});

  </script>
</head>

<body>
<div class="slider">
	<ul class="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;width: 120px;">2</li>
			<li  id = "3" style="background-color:Yellow;width: 70px; ">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
<div class="prev"><</div>
<div class="next">></div>
	</div>
</body>
</html>
Ответить с цитированием
  #13 (permalink)  
Старый 12.10.2016, 11:13
Новичок на форуме
Отправить личное сообщение для insaidd Посмотреть профиль Найти все сообщения от insaidd
 
Регистрация: 29.09.2016
Сообщений: 6

РОНИ ТЫ ВОЛЩЕБНИК!!!
Ответить с цитированием
  #14 (permalink)  
Старый 09.10.2017, 09:42
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 75

рони,
Не могли бы объяснить код на 68-й строке, или дать ссылку, где такой прием объясняется?
loop && go();

То есть, можно написать так:
var act = false;
function func(a, b){}
act && func(a, b);
// или
act && function(){}

И если act является false, то функция не выполняется, а если true - выполняется?
Ответить с цитированием
  #15 (permalink)  
Старый 09.10.2017, 10:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,605

Сообщение от Булат Азат улы
И если act является false, то функция не выполняется, а если true - выполняется?
да
Цитата:
⚠Не используйте && вместо if

подробнее ниже по ссылке
&&
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает автопрокрутка слайдера podsolomko95 Элементы интерфейса 0 06.04.2016 11:02
Как организовать два слайдера по принципу обложка-внутренние страницы? helgajijka jQuery 4 06.09.2015 13:52
bxslider булиты(представления) в виде слайдера Baton1777 Элементы интерфейса 9 18.07.2015 22:48
Два слайдера на странице ureech Элементы интерфейса 1 14.05.2014 14:56
Автоматизация слайдера IVAAAAN jQuery 1 25.10.2013 16:37