У меня есть трехстраничный сайт. В режиме рабочего стола я хочу, чтобы макет текущего слайда занимал 75% области просмотра. Левой стрелки не будет, а правая займет 25% экрана справа. Стрелка прозрачна и находится сверху следующего слайда, который также занимает 25%. При нажатии на стрелку вправо, вторая страница будет скользить, так же, как третья и так далее, чтобы создать бесконечное l oop. Это станет простой вертикальной прокруткой, когда на мобильном телефоне.
Я ищу функцию jquery, чтобы сделать возможной анимацию вставки. Я пытался с Toggle, Translate и SlideIn, но безуспешно. Первые два скользили по одному объекту в то время, тогда как для последнего я нашел ссылки только с помощью навигационных меню navigation, отображая кнопки на трех страницах одновременно.
Не могли бы вы помочь мне написать функцию, пожалуйста? Я новичок в js, поэтому это может быть глупый вопрос. Заранее спасибо, хорошего дня!
.mobileHide {
display: inline;
}
@media only screen and (max-width: 600px) {
.mobileHide {
display: none;
}
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
@media screen and (max-width: 600px) {
body {
margin: 0px;
padding: 0px;
overflow: scroll;
}
}
* {
box-sizing: border-box;
}
.container {
width: 300vw;
height: 100vw;
background-color: grey;
}
@media screen and (max-width: 600px) {
.container {
width: 100vw;
height: 100vw;
background-color: grey;
}
}
.page1 {
width: 75vw;
height: 100vw;
background-color: green;
float: left;
}
#slide1 {
width: 75vw;
height: 100vw;
background-color: lightgreen;
}
@media screen and (max-width: 600px) {
#slide1 {
width: 100vw;
height: 100vw;
}
}
.page2 {
width: 75vw;
height: 100vw;
background-color: yellow;
float: left;
}
@media screen and (max-width: 600px) {
.page2 {
float: left;
position: relative;
}
}
#slide2 {
width: 75vw;
height: 100vw;
background-color: orange;
}
@media screen and (max-width: 600px) {
#slide2 {
width: 100vw;
height: 100vw;
}
}
.page3 {
width: 75vw;
height: 100vw;
background-color: blue;
float: right;
}
@media screen and (max-width: 600px) {
.page3 {
float: left;
position: relative;
}
}
#slide3 {
width: 75vw;
height: 100vw;
background-color: lightblue;
}
@media screen and (max-width: 600px) {
#slide3 {
width: 100vw;
height: 100vw;
}
}
#arrow {
position: fixed;
top: 0;
right: 0;
width: 25vw;
height: 100%;
margin: 0;
cursor: pointer;
background-color: rgba(255, 0, 0, 0.3);
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<title>53100 slider from scratch</title>
<meta charset="utf-8" />
</head>
<body>
<div class="container">
<div class="page1">
<div id="slide1">
Slide1
</div>
</div>
<div class="page2">
<div id="slide2">
Slide2
</div>
</div>
<div class="page3">
<div id="slide3">
Slide3
</div>
</div>
<div class="mobileHide">
<button onclick="myFunction()" id="arrow">Next</button>
</div>
</div>
</body>
</html>