Не работает слайдер html

Не работает слайдер

Добрый день, не правильно отображается слайды все картинки идут в столбик в чем может быть причина, вроде все подключил.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
 html lang="ru"> head> meta charset="utf-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1"> title>Страница/title> link href="css/bootstrap.css" rel="stylesheet"> link href="css/style.css" rel="stylesheet"> script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">/script>     /head> body> div class="container"> header> h1>Сайт/h1> /header> div class="container"> nav class="navbar navbar-inner"> --> ul class="nav navbar-nav"> li>a href="#">Страница/a>/li> li>a href="#">Страница/a>/li> li>a href="#">Страница/a>/li> li>a href="#">Страница/a>/li> li>a href="#">Страница/a>/li> /ul> /nav> /div> /div> div id="mycarousel" class="carousel slide" > ol class="carousel-indicators"> li class="active" data-target="#carousel" data-slide="0">/li> li data-target="#carousel" data-slide-to="1">/li> li data-target="#carousel" data-slide-to="2">/li> li data-target="#carousel" data-slide-to="3">/li> /ol> /div> div class="carousel-inner"> div class="item active"> img src="/image/1.png" class="img-responsive"> div class="carousel-caption" > h4>Слайд/h4> p>Страница/p> /div> div class="item"> img src="/image/3.png" class="img-responsive" alt="Our offices"> div class="carousel-caption"> h4>Слайд/h4> p>Страница/p> /div> div class="item"> img src="/image/4.png" class="img-responsive"> div class="carousel-caption"> h4>Слайд/h4> p>Страница/p> /div> div class="item"> img src="/image/5.png" class="img-responsive"> div class="carousel-caption"> h4>Слайд/h4> p>Старница/p> /div> a href="#carousel" class="left carousel-control" data-slide="prev"> span class="glyphicon glyphicon-chevron-left">/span> /a> a href="#carousel" class="right carousel-control" data-slide="next"> span class="glyphicon glyphicon-chevron-right">/span> /a> /div> /div> /div> /div> /div> script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">/script> script src="js/bootstrap.js">/script> /body> /html>

Источник

Не работает слайдер на сайте

Написал сайт html на основе шаблона. на сайте имеется слайдер поверх меню-строки «Menu — Contacts — Finance — About us. «. Я меняю все английские названия в этой строке на русские: «Меню, Контакты. «. Но результат не отображается: На месте где должны присутствовать эти слова — пусто. Поменял кодировку с UTF-8 на Юникод с помощью блокнот Windows. Слова отобразились, и как я хотел — на русском. Но вот картинки из слайдера пропали. Если вернуть кодировку Utf-8, картинки возвращаются, а русский текст исчезает. В чем дело? (Прилагаю Файл сайта)

Читайте также:  Отступ ссылок в html

Слайдер на сайте не корректно стал отображаться
На сайте после обновления плагина Responsive slider съезжает слайдер. При этом если смотреть через.

слайдер на сайте
Всем привет! Как сделать слайдер фотографий? Есть альбом с фотографиями, а надо чтоб при нажатии на.

Не отображается слайдер на сайте (WordPress)
Добрый день уважаемые cyberforum-ци, возникла одна проблемка. С недавнего времени решил.

не хочет работать слайдер картинок на сайте
не хочет работать слайдер картинок на сайте , либо отображает одну картинку (не переключаются.

Простите, но я начинающий программист, и вряд ли смогу решение проблемы найти вот так. не могли бы Вы конкретнее ответить. вряд ли это сложно

Не могу быть 100% уверенным, но посмотри какой доктайп тебя стоит в первой строке твоего index файла, и поменяй на следующий:

meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Не помогло. Ситуация не изменилась

Добавлено через 8 минут
Проверьте пожалуйста у себя

Просмотрел только что личные сообщения — у меня от Вас сообщений нет, ровным счетом, как я и не вижу прикрепленного файла в ветке данной темы. Посмотрите как выглядит прикрепленный файл к первому посту здесь — Правильное использование высоты в этой теме, я не вижу прикрепленных файлов.

Лучший ответ

Сообщение было отмечено CyberIslam как решение

Решение

CyberIslam, у тебя проблема в файле Vegur_bold_700.font.js, если его отключить, то и меню отображается нормально и слайдшоу.

Это тебе тогда лучше в раздел JavaScript обратиться, объяснить проблему и показать этот файл. Я тебе лишь указал на файл который вызывает данную проблему в работе сайта, в данном разделе я думаю тебе вряд ли помогут.

Добавлено через 7 минут
Еще хорошо было бы проверить этот файл vegur_400.font.js, т.к. если он тоже включен, то в контенте частично текст не отображается. Единственное мое предположение, что эти два файла, что я написал используют определенный шрифт, который не поддерживает кириллицу, поэтому текст и не отображается.

Источник

Не работает CSS слайдер?

Всем привет!
Я только обучаюсь, так что не судите строго. Хочу сделать свой сайт на Django и на нём сделать carousel. Слайдер сделал на CSS по туториалу, но переключение между слайдами не рабортает. Сам Django видит все єлементы, проблема скорее всего в HTML или CSS

Вот код главной странички:

Вот код шаблона блока content

 
 data-lazy-src=

>

>

* < margin: 0; padding: 0; >body < background-color: #FFF; >.slider < width: 900px; height: 400px; overflow: hidden; border: 1px solid #ddd; >.middle < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.navigation < position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; >.bar < height: 6px; width: 25px; margin: 6px; cursor: pointer; background-color: #ddd; opacity: .5; border-radius: 10px; transition: all .3s ease; >.bar:hover < opacity: .8; transform:scale(1.1); >input[name="r"] < position: absolute; visibility: hidden; >.slides < width: 500%; height: 100%; display: flex; >.slide < width: 20%; transition: all .6s ease; >#r1:checked ~ .s1 < margin-left: 0; >#r2:checked ~ .s1 < margin-left: -20; >#r3:checked ~ .s1 < margin-left: -40; >#r4:checked ~ .s1 < margin-left: -60; >#r5:checked ~ .s1

Простой 2 комментария

Источник

Как решить проблему с отображением слайдера Slick?

52fb3f7c999d4336a30238fc7a9e6ebd.png

В первом табе все ок, слайдер работает. Переключаемся на второй таб, там слайдер работает, только не показывает картинки. Если нажать на стрелочку или изменить размер окна они появятся.

Подскажите как можно сделать так чтобы картинки появлялись сразу.

dezmond89reg

Не могли, бы вы, поподробнее, куда пихать реиницилизацию?
$(‘.tabs1’).on(‘click’, function (e) $(«.gallery»).slick(‘reinit’);
>);
Сделал так, но при перелистывании добавляются лишние точки в слайдере.

Читайте также:  Windows планировщик задач php

dezmond89reg

UDAV99

/* bootstrap hack: fix content width inside hidden tabs */ .tab-content > .tab-pane, .pill-content > .pill-pane < display: block; /* undo display:none */ height: 0; /* height:0 is also invisible */ //overflow: hidden; /* no-overflow */ >.tab-content > .active, .pill-content > .active < height: auto; /* let the content decide it */ >/* bootstrap hack end */

Velimudr1

Проще изменить одно состояние.
Попробуйте переопределить display:none на visibility: hidden
Таким образом слайдер будет видеть открытый блок и всё будет работать. Только не активным блокам лучше принудительное значение height на ноль поставить, а активному auto. Иначе будут зарезервированные пробелы от остальных блоков ))

Velimudr1

ohikoshimi, Ещё вариант есть, инициировать слайдер повторно, при открытии модального окна, тогда он начинает пересчёт параметров и открывается с обновлёнными данными.
К примеру, так:

Как видишь, событие нажатия вызывает модальное окно (у меня открытие модальки происходит в другой функции, а тебя должно быть по своему, или в этой дописать код), проверяет открыто ли (visible) и производит действия после заданного времени. Время должно быть не меньше того, сколько отводится на открытие модального окна.

Источник

Не работает слайдер

не работает слайдер
Uncaught TypeError: Object has no method ‘slider’ <link rel="stylesheet".

Слайдер не работает
Доброго времени суток. Подскажите пожалуйста как решить такую проблему: есть страничка со.

Не работает слайдер
всем привет! на сцене есть слайдер с его помощью меняю масштаб спрайта public GameObject Obj; .

Эксперт JS

Эксперт JS

ЦитатаСообщение от ardu_c Посмотреть сообщение

ЦитатаСообщение от ardu_c Посмотреть сообщение

Значит ошибки есть.
— Функции prevSlide нет совсем
— Функция nextSlide используется раньше чем объявляется

Это прям с лета, а там может и еще чего есть.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
 html> head> meta charset="UTF-8"> title>Picture perfect/title> meta name="keywords" content=" крафтовая пивоварня, купить крафтовое пиво Москва, качественное крафотовое пиво"> /head> body> div class="head"> 456 /div> div class="menu"> nav id="menu-list"> a href="#">Главная/a> a href="#">Новости/a> a href="#">Контакты/a> a href="#">Портфолио/a> /nav> /div> div class="foot"> Молодое поколение a href="#" class="menu-btn"> div class="cube"> div class="first">/div> div class="second">/div> div class="third">/div> /div> /a> /div> div class="slider-wrapper" > div class="slide active" > img src="img_1.jpg" alt=" " > /div> div class="slide" > img src="img_2.jpg" alt=" " > /div> div class="slide" > img src="img_3.jpg" alt=" " > /div> div id="btn-prev">/div> div id="btn-next">/div> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
 html> head> meta charset="UTF-8"> title>Picture perfect/title> meta name="keywords" content=" крафтовая пивоварня, купить крафтовое пиво Москва, качественное крафотовое пиво"> /head> body> div class="head"> 456 /div> div class="menu"> nav id="menu-list"> a href="#">Главная/a> a href="#">Новости/a> a href="#">Контакты/a> a href="#">Портфолио/a> /nav> /div> div class="foot"> Молодое поколение a href="#" class="menu-btn"> div class="cube"> div class="first">/div> div class="second">/div> div class="third">/div> /div> /a> /div> div class="slider-wrapper" > div class="slide active" > img src="img_1.jpg" alt=" " > /div> div class="slide" > img src="img_2.jpg" alt=" " > /div> div class="slide" > img src="img_3.jpg" alt=" " > /div> div id="btn-prev">/div> div id="btn-next">/div> /div> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
const prev = document.getElementById('btn-prev'), next = document.getElementById('btn-next'), slides = document.querySelectorAll ('slide'); let index = 0; next.addEventListener('click', nextSlide); prev.addEventListener('click', prevSlide); const activeSlide = n =>{ for(slide of slides){ slide.classList.remove('active'); } slide[n].classList.add('active'); } const nextSlide = () =>{ if(index == slides.length-1){ index = 0; activeSlide(index); }else{ index++; activeSlide(index); } } const prevSlide = () =>{ if(index == 0){ index = slides.length-1; activeSlide(index); }else{ index--; activeSlide(index); } }

Добавлено через 1 минуту
опять Ругается на addEventListener

Читайте также:  Html код для плагинов

Эксперт JS

ЦитатаСообщение от ardu_c Посмотреть сообщение

Как обьявить функцию nextSlide()?

Добавлено через 3 минуты
Скрипт добавлял все равно не работает

Добавлено через 1 минуту
В приложение Dcoder автоматически создаются три файла

Эксперт JS

ЦитатаСообщение от ardu_c Посмотреть сообщение

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
 html> head> meta charset="UTF-8"> title>Picture perfect/title> meta name="keywords" content=" крафтовая пивоварня, купить крафтовое пиво Москва, качественное крафотовое пиво"> /head> body> div class="head"> 456 /div> div class="menu"> nav id="menu-list"> a href="#">Главная/a> a href="#">Новости/a> a href="#">Контакты/a> a href="#">Портфолио/a> /nav> /div> div class="foot"> Название a href="#" class="menu-btn"> div class="cube"> div class="first">/div> div class="second">/div> div class="third">/div> /div> /a> /div> div class="slider-wrapper" > div class="slide active" > img src="img_1.jpg" alt=" " > /div> div class="slide" > img src="img_2.jpg" alt=" " > /div> div class="slide" > img src="img_3.jpg" alt=" " > /div> div id="btn-prev">/div> div id="btn-next">/div> /div> script> [JS]const prev = document.getElementById('btn-prev'), next = document.getElementById('btn-next'), slides = document.querySelectorAll ('slide'); let index = 0; next.addEventListener('click', nextSlide); prev.addEventListener('click', prevSlide); const activeSlide = n => < for(slide of slides)< slide.classList.remove('active'); >slide[n].classList.add('active'); > const nextSlide = () =>< if(index == slides.length-1)< index = 0; activeSlide(index); >else < index++; activeSlide(index); >> const prevSlide = () =>< if(index == 0)< index = slides.length-1; activeSlide(index); >else < index--; activeSlide(index); >>[/JS] /script> /body> /html>

Источник

Оцените статью