Создаем простой слайдер синхронизированный с меню

Создаем простой слайдер синхронизированный с меню

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

Заранее сообщаем, что данное решения исключительно для экранов ПК. На экранах телефонов и планшетов рекомендуем скрывать данный слайдер, так как элементарно не оптимизирован для небольших экранов, да и это не нужно было в исходном задании.

Данное решение не использует никаких дополнительных фреймворков (кроме jQuery). И отличается очень компактным, легким кодом, который является очень простым.

Демонстрация самого слайдера:

Пункт 1
Пункт 2
Пункт 3
Пункт 4

Слайд 1

Слайд 2

Слайд 3

Слайд 4

HTML код:

Размещается там, где нужен сам слайдер. Символы комментирования удалять не стоит, так как они используются специально для ликвидации пробелов между inline блоками.

<div id="slidecover">
<div id="btn-slblock1" class="btn-slblock">Пункт 1</div><!--
--><div id="btn-slblock2" class="btn-slblock">Пункт 2</div><!--
--><div id="btn-slblock3" class="btn-slblock">Пункт 3</div><!--
--><div id="btn-slblock4" class="btn-slblock">Пункт 4</div>

<div id="mainslide">
<div id="slblock1" class="slblock"></div>
<div id="slblock2" class="slblock"></div>
<div id="slblock3" class="slblock"></div>
<div id="slblock4" class="slblock"></div>
</div>
</div>

JS код:

Обязательно убедитесь что у Вас подключен jQuery (подключен по умолчанию у 99% сайтов).

jQuery(document).ready(function(){
//Обрабатываем наведение курсора на кнопку
    jQuery('#btn-slblock1').mouseover(function(){
        jQuery('#slblock1').addClass("open");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");
    });
    jQuery('#btn-slblock2').mouseover(function(){
        jQuery('#slblock2').addClass("open");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");
    });
    jQuery('#btn-slblock3').mouseover(function(){
        jQuery('#slblock3').addClass("open");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");                
    });
    jQuery('#btn-slblock4').mouseover(function(){
        jQuery('#slblock4').addClass("open");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
    });
//Обрабатываем наведение курсора на блок
    jQuery('#slblock1').mouseover(function(){
        jQuery('#slblock1').addClass("open");
        jQuery('#slblock1').removeClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");
    });
    jQuery('#slblock2').mouseover(function(){
        jQuery('#slblock2').addClass("open");
        jQuery('#slblock2').removeClass("close");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");
    });
    jQuery('#slblock3').mouseover(function(){
        jQuery('#slblock3').addClass("open");
        jQuery('#slblock3').removeClass("close");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').addClass("close");
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').addClass("close");                
    });
    jQuery('#slblock4').mouseover(function(){
        jQuery('#slblock4').addClass("open");
        jQuery('#slblock4').removeClass("close");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').addClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock3').addClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').addClass("close");
    });

//Обрабатываем выведение курсора за пределы блока 
    jQuery('#slidecover').mouseout(function(){
        jQuery('#slblock4').removeClass("open");
        jQuery('#slblock4').removeClass("close");
        jQuery('#slblock1').removeClass("open");
        jQuery('#slblock1').removeClass("close");
        jQuery('#slblock2').removeClass("open");
        jQuery('#slblock2').removeClass("close");
        jQuery('#slblock3').removeClass("open");
        jQuery('#slblock3').removeClass("close");
    });
})

CSS код:

Рекомендуем размещать либо в файле для css кода, либо подключить между тегами <head>.

/*Оформляем обертку*/
#slidecover {width: 700px; margin: auto; height: 355px;}
#mainslide {width: 700px; position: relative; box-sizing: border-box;}
#mainslide, #mainslide * {transition: 0.8s;}

/*Оформляем кнопки*/
.btn-slblock {display: inline-block;
background: #4682a2;
width: 175px;
padding: 10px 14px;
box-sizing: border-box;
color: #fff;
text-align: center;
cursor: pointer;}

.btn-slblock:hover {background: #2f596f;}

/*Создаем блоки*/
#slblock1 {width:175px; height: 349px; position: absolute; left: 0px; background: #eee; z-index: 3}
#slblock2 {width:175px; height: 349px; position: absolute; left: 175px; background: #ccc; z-index: 3}
#slblock3 {width:175px; height: 349px; position: absolute; left: 350px; background: #bbb; z-index: 3}
#slblock4 {width:175px; height: 349px; position: absolute; left: 525px; background: #aaa; z-index: 3}

/*А теперь их анимируем*/

#slblock1.open {width:700px; position: absolute; left: 0px; z-index: 28}
#slblock2.open {width:700px; position: absolute; left: 0px; z-index: 28}
#slblock3.open {width:700px; position: absolute; left: 0px; z-index: 28}
#slblock4.open {width:700px; position: absolute; left: 0px; z-index: 28}

#slblock1.close {z-index: 2; opacity: 0.3;}
#slblock2.close {z-index: 2; opacity: 0.3;}
#slblock3.close {z-index: 2; opacity: 0.3;}
#slblock4.close {z-index: 2; opacity: 0.3;}