Центр AnythingSlider со скрытым переполнением с обеих сторон

Question

Моя цель состоит в том, чтобы ползунок шириной 1280px был широко и центрирован на странице. Я хотел бы, чтобы края содержимого имели скрытое переполнение с обеих сторон. Например, я хочу, чтобы центр контента всегда оставался в центре страницы, причем каждая сторона была отрезана, поскольку размер браузера был изменен, при этом горизонтальная полоса прокрутки не появлялась.

Есть ли простой способ достичь этого?

Answer 1

У меня получилось несколько интересное решение, которое работало для меня, по крайней мере, в Chrome, Firefox и Safari, где я его тестировал. Это может быть немного взломанным, но результат был классным.

Так вот что я сделал: я положил .wrapper шириной 1280px. Поля 0 autoкроме левое поле, где все это происходит. Левое поле должно быть установлено на половинаdiv ширина. В этом случае это будет 640px. Однако, поскольку он должен переполняться за пределы левого экрана, он должен быть установлен на отрицательное число (то есть -640px). Затем, чтобы отменить этот эффект, когда экран больше, а затем экран left:50% подтолкнул его к правильной сумме. Очевидно, что для того, чтобы действительно работать margin:0 auto, position должен быть установлен на relative (или absolute, если хотите).

.wrapper { width:1280px; 
      margin:0 auto 0 -640px; 
      position:relative; 
      left:50% 
     } 

одна проблема
я нашел одну проблему с этим, хотя. Поскольку мы используем отрицательный запас, он толкает div влево, чтобы не видеть, слишком ли мало их окно или окно браузера. Дайте мне знать, если это проблема, и делает ее там, где она не работает для вас.

Answer 2

Добавить этот CSS класс

.overflowbothsides{ 
    vertical-align: middle; 
    margin: 0 auto; 
    position: relative; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%); 
} 

решение с кодом и примером enter link description here