Слайдер карусель на css

111

R4z0R

3 декабря 2018, 17:55

1920

Где взять карусель-слайдер примерно такого функционала?

Нужно чтобы несколько картинок были в один ряд, центральная четкая, боковые замутненные или затемненные, вся эта лента прокручивается по кругу и если нажать на фото, то оно бы увеличивалось pop-upом?

437

totamon

4 декабря 2018, 06:37

#1

может на сайте поискать с которого пример указан?🍿

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget

111

R4z0R

4 декабря 2018, 08:46

#2

смотрел, но этот пример и есть наиболее подходящий, но не хватает вышеперечисленного

225

D.iK.iJ

4 декабря 2018, 09:23

#3

Сделать блур на крайних картинках, а всплывающее окно через Фенсибокс ))

Например, как-то так:

.container img {filter: blur(2px); transition: filter 0.1s;}
.container img[style^="left: 320px;"], .container img[style^="left: 160px;"] {filter: blur(0px);}

1

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

111

R4z0R

10 декабря 2018, 16:26

#4

а как сделать карусель, чтобы она свайпом на смартах прокручивалась?

287

tommy-gung

11 декабря 2018, 06:04

#5

посмотреть в сторону js-плагинов :)

Здесь не могла быть ваша реклама

_

381

_SP_

11 декабря 2018, 09:09

#6

Год назад скачал пяток js, выдрал из них нужный функционал.

Работает вроде более или менее.

Там функционала-то того...

Готовые использовать затруднительно, очень много лишних рюшечек, лишнего кода, и абсолютно ДЕБИЛЬНОГО поведения.

(4 из 5, к примеру, продолжали эту карусель даже после того, как пользователь явно возвращался к предыдущему слайду,

какие там еще "бомбы" разбираться не стал)

247

altezzik

11 декабря 2018, 09:55

#7

Мне кажется, полно на всяких codepen и jsfiddle каруселей на css...

[Удален]

12 декабря 2018, 17:12

#8

R4z0R:
смотрел, но этот пример и есть наиболее подходящий, но не хватает вышеперечисленного

возьмите любую понравившуюся галерею и прикрутите всплывающее окно. делал когда-то, описание, код и демка здесь. Впрочем, не css only.

111

R4z0R

30 декабря 2018, 19:04

#9

нашел подходящий вариант, но там расчет: одна галерея на страницу, а мне надо 3-4 штуки на страницу.

Есть скрипт:

<script>	

jQuery(document).ready(function($) {

  var si = $('#gallery-1').royalSlider({

    addActiveClass: true,

    arrowsNav: false,

    controlNavigation: 'none',

    autoScaleSlider: true, 

    autoScaleSliderWidth: 960,     

    autoScaleSliderHeight: 340,

...

...

</script>

и дальше div

<div id="gallery-1" class="royalSlider rsDefault visibleNearby">

img

img

img

</div>

как сделать, чтобы был один блок скрипта с перебором gallery 1-4, чтобы не прописывать перед каждым дивом свою версия скрипта с нужным номером галереи? Попробовал организовать цикл for,

var i;

for (i = 0; i < 3; i++) {

jQuery(document).ready(function($) {

  var si = $('#gallery-'.i).royalSlider({

...

}

но ничего не получилось, да и не силен я в js

S

469

Sitealert

30 декабря 2018, 22:28

#10

R4z0R:
не силен я в js

В JS конкатенация делается не точкой, а плюсом

'#gallery-'+i

И нельзя в цикле переопределять var si.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Зачем быть уникальным в мире, где все можно скопировать

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов