我正在为一位平面设计师创建网站。
我需要创建一个响应式滑块,当单击一个图像时,它会出现在固定位置。
因此,单击时,一个div打开并显示滑块。
在我的JS代码中,我使用数据搜索必须出现的图像,因此我定义滑块的大小并启动它。
唯一的问题是,当手机处于横向模式时,我无法在滑块上滚动。
我尝试了几种方法“overview-y:scroll”,“min-height:100%”,“max-height:100%”,甚至用媒体查询“orientation:landscape”
JSFiddle链接
我提供了一些代码,并留下了相关网站的链接。
The link
function reset() {
$('.slider_list').empty();
$('.slider ul').css({
marginLeft: 0,
left: 0,
width: 0,
height: 0,
});
$('.slider_content').css({
width: 0,
height: 0
});
$('.toLeft').css('visibility', 'visible');
$('.slider_navigation').css('display', 'flex');
}
$(".work_figure").click(function () {
var objet = {
graphique1: ['https://artfeuille.fr/img/graphisme/slider-graphisme-1a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1c.png'],
graphique2: ['https://artfeuille.fr/img/graphisme/slider-graphisme-2.png'],
graphique3: ['https://artfeuille.fr/img/graphisme/slider-graphisme-3a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3c.png'],
graphique4: ['https://artfeuille.fr/img/graphisme/slider-graphisme-4a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-4b.png'],
graphique5: ['https://artfeuille.fr/img/graphisme/slider-graphisme-5.png'],
graphique6: ['https://artfeuille.fr/img/graphisme/slider-graphisme-6a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-6b.png'],
graphique7: ['https://artfeuille.fr/img/graphisme/slider-graphisme-7.png'],
graphique8: ['https://artfeuille.fr/img/graphisme/slider-graphisme-8.png']
};
reset();
var name = $(this).data("name");
var number = $(this).data("number");
var table = name + number;
var table2 = [];
for (key in objet) {
if (key === table) {
table2 = objet[key];
}
}
indexLenght = table2.length;
for (var i = 0; i < indexLenght; i++) {
$('.slider_list').append('<li class="slider_items"><img src="' + table2[i] + '" alt="Ca fonctionne" class="slider_img" /></li>');
}
$('.slider').css('height', '100%');
var slideCount = $('.slider ul li').length;
var slideWidth = $('.slider ul li img').width();
var slideHeight = $('.slider ul li img').height();
var slideTotalWidth = slideCount * slideWidth;
if (slideCount > 2) {
$('.slider ul li:last-child').prependTo('.slider ul');
$('.slider ul').css('margin-left', -slideWidth);
} else if (slideCount > 1) {
$('.toLeft').css('visibility', 'hidden');
} else {
$('.slider_navigation').css('display', 'none');
}
$('.slider .slider_content').css({
width: slideWidth,
height: slideHeight
});
$('.slider ul').css({
width: slideTotalWidth,
height: slideHeight
});
function nextSlide() {
$('.slider ul').animate({
left: slideWidth
}, 500, function () {
$('.slider ul li:last-child').prependTo('.slider ul');
$('.slider ul').css('left', '');
});
}
function previousSlide() {
$('.slider ul').animate({
left: -slideWidth
}, 500, function () {
$('.slider ul li:first-child').appendTo('.slider ul');
$('.slider ul').css('left', '');
});
}
$(".toLeft").unbind('click').click(function () {
nextSlide();
});
$(".toRight").unbind('click').click(function () {
previousSlide();
});
$(document).on('keydown', function (e) {
var touche = e.keyCode;
if (touche === 39) {
previousSlide();
} else if (touche === 37) {
nextSlide();
}
});
});
$(".slider_close").click(function () {
$('.slider').css('height', '0');
});
/* Slider section */
.slider {
position: fixed;
top: 0%;
bottom: 0%;
left: 0%;
height: 0%;
width: 100%;
background: url('../img/bg_header.png') no-repeat center center fixed;
background-size: cover;
z-index: 99999;
overflow-y: scroll;
transition: all .3s ease-in-out;
}
.slider .container {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
height: 100%;
}
.slider_close {
color: #FFF;
font-size: 30px;
font-family: 'OpenSans SemiBold', sans-serif;
float: right;
margin-bottom: 100px;
}
.slider_content {
overflow: hidden;
margin: 0 auto;
position: relative;
}
.slider_navigation {
position: absolute;
top: 55%;
left: 0;
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.icons_slider {
font-size: 50px;
}
.slider_list {
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slider_items {
float: left;
display: block;
position: relative;
}
.slider_list img {
width: 901px;
height: 675px;
}
@media screen and (max-width: 992px) {
.slider_list img {
width: 700px;
height: 525px;
}
}
@media screen and (max-width: 768px) {
.slider_list img {
width: 320px;
height: 240px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider section -->
<div class="slider">
<div class="container">
<a href="javascript:void(0)" class="slider_close"><i class="fas fa-times icons_slider"></i></a>
<div class="slider_content">
<ul class="slider_list" id="slide_content">
</ul>
</div>
<nav class="slider_navigation">
<a href="javascript:void(0)" class="toLeft icons_slider"><i class="fas fa-caret-left"></i></a>
<a href="javascript:void(0)" class="toRight icons_slider"><i class="fas fa-caret-right"></i></a>
</nav>
</div>
</div>
我希望你能帮助我。 非常感谢您的帮助,祝您有愉快的一天。