Проблема при прокрутке с фиксированным положением

-2

Я пытаюсь создать карусельный слайдер, который будет выглядеть как this, аналогично тому, что у нас есть в android.Проблема при прокрутке с фиксированным положением

Я нахожусь в самом начале его создания, и проблема, с которой я застрял, заключается в том, что я использую position: fixed;, но я хочу, чтобы она была зафиксирована горизонтально, потому что ее нужно будет прокручивать.

Как применить только position: fixed; к горизонтальной прокрутке?

пыльник, это код, я в настоящее время с помощью:

var val = 0; 
$("button").click(function() { 
    for (var i = 0; i < 9; i++) { 
    $('.MySlide:nth-child(' + (i + 1) + ')').removeClass('MySlide' + (((val + i) % 9) + 1) + ''); 
    $('.MySlide:nth-child(' + (i + 1) + ')').addClass('MySlide' + (((val + i + 1) % 9) + 1) + ''); 
    } 
    val = (val + 1) % 9; 
});

.long-div { 
    height: 300px; 
} 
.MySlides-wrap { 
    border: 1px; 
    border-style: solid; 
    height: 350px; 
} 
.MySlide { 
    float: left; 
    width: 300px; 
    height: 300px; 
    position: fixed; 
    transition: transform 500ms; 
    left: -75px; 
    border: 1px; 
    border-style: solid; 
    background-color: blue; 
} 
.MySlide1 { 
    z-index: 1; 
    transform: translate(0px, 0px) scale(0.6, 0.6); 
} 
.MySlide2 { 
    z-index: 2; 
    transform: translate(150px, 0px) scale(0.7, 0.7); 
} 
.MySlide3 { 
    z-index: 3; 
    transform: translate(300px, 0px) scale(0.8, 0.8); 
} 
.MySlide4 { 
    z-index: 4; 
    transform: translate(450px, 0px) scale(0.9, .9); 
} 
.MySlide5 { 
    z-index: 5; 
    transform: translate(600px, 0px) scale(1, 1); 
} 
.MySlide6 { 
    z-index: 4; 
    transform: translate(750px, 0px) scale(0.9, .9); 
} 
.MySlide7 { 
    z-index: 3; 
    transform: translate(900px, 0px) scale(0.8, 0.8); 
} 
.MySlide8 { 
    z-index: 2; 
    transform: translate(1050px, 0px) scale(0.7, 0.7); 
} 
.MySlide9 { 
    z-index: 1; 
    transform: translate(1200px, 0px) scale(0.6, 0.6); 
} 
.MySlideFutured { 
    z-index: 9; 
    transform: scale(1, 1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>teste slider</title> 
    </head> 
    <body> 
    <div class="long-div"></div> 
    <div class="MySlides-wrap"> 
     <div class="card MySlide MySlide1"></div> 
     <div class="card MySlide MySlide2"></div> 
     <div class="card MySlide MySlide3"></div> 
     <div class="card MySlide MySlide4"></div> 
     <div class="card MySlide MySlide5"></div> 
     <div class="card MySlide MySlide6"></div> 
     <div class="card MySlide MySlide7"></div> 
     <div class="card MySlide MySlide8"></div> 
     <div class="card MySlide MySlide9"></div> 
    </div> 
    <button>Next</button> 
    </body> 
</html>

источник

2015-05-29 Robson O S

Я не мог найти никого, что я хочу, плюс это хорошее упражнение для меня :) –

@ humble.rumble все, что вы сказали до сих пор, обескураживает! Если я использую неправильный подход, предложите лучше, вместо того чтобы критиковать мои! –

Есть много решений этой проблемы, но фиксированное позиционирование используется, чтобы придерживаться кое-что на положении на экран, а не позицию на веб-странице. Я предлагаю создать прокручиваемый контейнер и управлять смещением прокрутки с помощью jquery.

Работа пример (в Chrome и Firefox, по крайней мере, не испытанные другие):

https://jsfiddle.net/7duatxmv/

прощают встроенные стили для демонстрации:

<div id="slideContainer" style="position:relative; overflow:hidden; white-space: nowrap;"> 
    <div class="slide" style="display:inline-block;"> 
     Content 1 
    </div> 
    <div class="slide selected" style="display:inline-block;"> 
     Content 2 (scroll to me by default) 
    </div> 
    <div class="slide" style="display:inline-block;"> 
     Content 3 
    </div> 
</div>

В этом случае " slideContainer "будет иметь ширину, равную ширине одного слайда, и вы используете собственную прокрутку браузера для переключения между слайдами.

jQuery может управлять прокруткой через .scrollLeft() и .offset().

источник

2015-05-30 06:07:23 user2867288

Проблема при прокрутке с фиксированным положением

ответ

Смежные вопросы