Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2021, 00:20
Новичок на форуме
Отправить личное сообщение для mut4bor Посмотреть профиль Найти все сообщения от mut4bor
 
Регистрация: 29.11.2021
Сообщений: 1

Как сделать меню 3 картинками, чтобы при нажатии на стрелки вправо и влево картинки п
Пытаюсь сделать меню с 3 картинками, чтобы при нажатии на стрелки вправо и влево картинки переключались. Есть предположение, что можно это сделать через массив, но не знаю как это реализовать на jQuery.

HTML

<div class="products">
<div id="productsPICS">

<div>
<img src="img/products/1.jpg">
</div>

<div>
<img src="img/products/2.jpg">
</div>

<div>
<img src="img/products/3.jpg">
</div>

</div>

<div id="leftButton" class="button">
<img src="img/icons/leftarrow.ico">
</div>

<div id="rightButton" class="button">
<img src="img/icons/rightarrow.ico">
</div>

</div>


CSS

.products {
position: relative;
text-align: center;
box-sizing: border-box;
width: 1000px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
user-select: none;
}

#productsPICS {
height: 600px;
position: relative;
}

#productsPICS img {
width: 100%;
border: 0px;
border-radius: 5px;
opacity: 1;
}

#productsPICS div:nth-child(1) {
display: block;
}

#productsPICS div:nth-child(2) {
display: none;
}

#productsPICS div:nth-child(3) {
display: none;
}

.button {
position: absolute;
width: 45px;
aspect-ratio: 1;
border: 0px solid black;
border-radius: 5px;
display: flex;
align-items: center;
opacity: 0.5;
transition: opacity 150ms linear;
background-color: #fff;
top: 260px;
z-index: 2;
}

.button:hover {
opacity: 1;
cursor: pointer;
}

.button img {
width: 60%;
aspect-ratio: 1;
margin-left: auto;
margin-right: auto;
}

#leftButton {
left: 10px;
}

#rightButton {
right: 10px;
}
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2021, 07:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,334

mut4bor,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2021, 07:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,334

Сообщение от mut4bor
Как сделать меню 3 картинками,
Поиск: Ключевые слова: простейший ; Сообщения от: рони
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать вертикальное меню с анимацией? Wimko jQuery 3 28.06.2020 20:31
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 7 14.10.2016 13:23
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
Как сделать чтобы менялся background в раскрывающемся меню Teotim Элементы интерфейса 2 20.10.2012 20:28
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24