Как изменить положение jquery на экране?

Question

В HTML файл сверху я включил файл CSS и JavaScript:

<link rel="stylesheet" type="text/css" href="carousel.css"> 
     <link rel="stylesheet" type="text/css" href="vertical_slider.css"> 
     <link rel="stylesheet" type="text/css" href="glow-effect.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script> 
     <script src="http://malsup.github.io/jquery.cycle2.js"></script> 
     <script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script> 
     <script src="java_script.js"></script> 

JQuery является тебя cycle2 JQuery также работает второе caroufredsel оба работают.

Но я хочу переместить цикл2 влево, чтобы он находился на левой стороне каруфреда. В HTML нижней части внутри корпуса у меня есть:

<div class="vertical-slider-container"> 
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev1" class="vertical-slider-nav vertical-slider-nav-up" /> 
    <div class="slideshow" 
     data-cycle-fx="carousel" 
     data-cycle-timeout="3000" 
     data-cycle-next="#next1" 
     data-cycle-prev="#prev1" 
     data-cycle-carousel-visible="3" 
     data-cycle-carousel-vertical="true"> 

     <img src="http://malsup.github.io/images/beach1.jpg" /> 
     <img src="http://malsup.github.io/images/beach2.jpg" /> 
     <img src="http://malsup.github.io/images/beach3.jpg" /> 
     <img src="http://malsup.github.io/images/beach4.jpg" /> 
     <img src="http://malsup.github.io/images/beach5.jpg" /> 
     <img src="http://malsup.github.io/images/beach9.jpg" /> 
    </div> 
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next1" class="vertical-slider-nav vertical-slider-nav-down" /> 
</div> 

И содержание cycle2 CSS файла:

.vertical-slider-container { 
    background: #fff; 
    border: 20px solid #fff; 
    box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    margin: 40px auto; 
    position: relative; 
    width: 120px; 
} 

.slideshow { 
    background: #fff; 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
} 

.slideshow img { 
    display: block; 
    width: 100px; 
    height: 100px; 
    padding: 10px; 
} 

.vertical-slider-nav { 
    color: rgba(0,0,0,0.8); 
    cursor: pointer; 
    display: block; 
    height: 40px; 
    margin-left: -20px; 
    left: 50%; 
    z-index: 10; 
    position: absolute; 
    overflow: hidden; 
    opacity: 0; 
    text-decoration: none; 
    width: 40px; 
    transition: all .3s ease; 
} 

.vertical-slider-nav-up { 
    top: -60px; 
} 

.vertical-slider-container:hover .vertical-slider-nav-up:hover { 
    opacity: 1; 
} 

.vertical-slider-container:hover .vertical-slider-nav-up { 
    top: -20px; 
    opacity: 0.7; 
} 

.vertical-slider-nav-down { 
    bottom: -60px; 
} 

.vertical-slider-container:hover .vertical-slider-nav-down:hover { 
    opacity: 1; 
} 

.vertical-slider-container:hover .vertical-slider-nav-down { 
    bottom: -20px; 
    opacity: 0.7; 
}![enter image description here][1] 

Я попытался изменить значение многих свойств в коде CSS, но это не эффект что-нибудь.

EDIT

Что я имею в виду, что у меня есть один JQuery уже в середине. Я хочу немного переместить цикл2 влево, чтобы он был на левой стороне другого большого изображения. Это отредактированный снимок экрана. Я сделал цикл2 из центра и вставил его там, где хочу.

Answer 1

Вы можете перемещать цикл 2 влево, применяя поплавком: слева Вертикально-слайдер-контейнер класса

.vertical-slider-container { 
     background: #fff; 
     border: 20px solid #fff; 
     box-shadow: 0 1px 4px rgba(0,0,0,.2); 
     margin-top: 40px; 
     float: left; 
     position: relative; 
     width: 120px; 
    } 

Answer 2

ли вы имеете в виду, чтобы переместить все вещи немного влево? Если это так, просто немного обновите поле контейнера.

fiddle

.vertical-slider-container { 
    background: #fff; 
    border: 20px solid #fff; 
    box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    margin: 40px; 
    position: relative; 
    width: 120px; 
} 

Я не уверен, я понимаю ваш вопрос ясно. Надеюсь, поможет!

Answer 3

top, left, bottom и right свойства CSS не доступны, когда элемент статически позиционируется. Статическое позиционирование - по умолчанию, и позиция автоматически. Попробуйте добавить атрибут position: relative к каждому из тех элементов, которые вы пытаетесь переместить.