Делаем слайдер контента на весь экран (fullscreen content slider). У слайдеров будут индивидуальные фоновые изображения, в качестве контента будут заголовок, подзаголовок и кнопка перехода на основной контент. Данный прием сейчас очень популярен не только на лендингах но и на сайтах-визитках и крупных порталах.
Здравсвуйте! Подскажите, пожалуйста, как отключить паузу если курсор мыши подвижен. Слайды не переключаются автоматически. Заранее спасибо!
Здравствуйте! В скрипте включена пауза при наведении на заголовок H2. Чтобы ее выключить надо в файле slider.js в строке 46 вместо значения «true» прописать «false»
function(){clearTimeout(slideTime); pause = false;},
Огромное спасибо! Работает! Очень помогли! Благодарен Вам!
P/S/ Отличный сайт и подача материала! Продолжайте в том же духе!
Здравствуйте!
А как сделать чтобы изображение было по центру?
Т.е. если изображение шире размера экрана, то оно не отцентрировано.
сейчас css такой:
.slider {
height: 350px;
width: 100%;
position: relative;
background-color:#000;
}
.slider-content {
height: 100%;
overflow: hidden;
width: 100%;
}
.slide {
height: 100%;
width: 100%;
display:table;
}
Здравствуйте.
У блоков к которым применено фоновое изображение надо прописать позиционирование фона:
.sl1 {
background: url("img/pushkin.jpg") no-repeat center top / cover;
}
Вы гений! Очень благодарен! Спасибо вам большое!
Пожалуйста) Всегда рад помочь!
Посоветуйте, пожалуйста, как сделать так чтобы изображения не кэшировались?
Есть необходимость часто менять их.
Посоветовали через Math.random(). Но врятли сам реализую.
Спасибо заранее!
Почему коментарий удалили? вопрос же был про кеширование картинок в этом слайдере((
Сделал так:
$(‘.sl1’).css(‘background’, ‘url(img/slides/02.jpg?’+Math.random()+’) no-repeat center top / cover’)
Насколько это правильно?
Хм, ну если работает то оставьте)
Иван, спасибо за слайдер! Очень пригодился! Но есть маленькая проблемка. Дело в том, что ie11 неадекватно реагирует на background-attachment: fixed. Поэтому решено немного переделать подачу изображений. Не через фон блока в css, а напрямую через тег img:
<img src="img/slides/slide_2.jpg" style="position:fixed; width:100%; height:auto;"
Работает. Но последний слайд отображается некорректно. Появляется на мгновение, а после висит фон body/ Потом опять все нормально, когда очередь доходит до первого слайда. Понимаю, что дело в скрипте. Помогите исправить пожалуйста!
Заранее огромное спасибо!
Евгений, но в этом слайдере нет стилей c «background-attachment: fixed»,
и потом, в IE11 у меня все прекрасно отображается…
Извините! Немного заморочился. fixed сам присвоил. Но в целом это не решает задачу.
Сейчас html слайдера такой:
<img src="img/slides/slide_2.jpg" style="width:100%; height:auto;"
Т.е. слайды добавлены без css. Это важно для верстки. помогите исправить скрипт для корректного отображения последнего слайда.
Извините еще раз! Проблема решена. Опять сам накосячил с кодом. Все в порядке. Еще раз спасибо за скрипт. И еще раз извините! з.ы. можете смело удалить все мои комменты.
Разобрались сами — это хорошо)
Как можно заменить переключение слайдом с кружочков на стрелочки по бокам страницы? Если вы поняли о чем я
Понял. Вот посмотрите тут, аналогичный скрипт только плюс есть стрелки.
Только там обертка с другим классом, учтите это в стилях.
http://heavenweb.ru/delaem-prostoy-slayder-na-jquery?page=2
Как сделать, что бы слайдер можно было прокручивать на сенсорный устройствах (планшетах, смартфонах) пальцем?
Я бы Вам посоветовал вот этот слайдер.
http://kenwheeler.github.io/slick/