Jump to content

How to place sliders in the same row in image slideshows


newcoder1010

Recommended Posts

Hi,

 

I have a slideshow with 5 images working fine. I would like to place the sliders buttons/pagination on the same row. I also like to place them in the center.

 

I have the below html i got from inspecting the page in chrome:

<div class="views-slideshow-controls-bottom clearfix">        <div id="widget_pager_bottom_xpress_car_sales-block" class="views-slideshow-pager-fields ">  <div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_0" class="views-slideshow-pager-field-item ">  <div class="views-field-counter">     <div class="views-content-counter">     1  </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_1" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even">  <div class="views-field-counter">     <div class="views-content-counter">     2  </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_2" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd">  <div class="views-field-counter">     <div class="views-content-counter">     3  </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_3" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even">  <div class="views-field-counter">     <div class="views-content-counter">     4  </div> </div></div><div id="views_slideshow_pager_field_item_bottom_xpress_car_sales-block_4" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd views-row-last">  <div class="views-field-counter">     <div class="views-content-counter">     5  </div> </div></div></div>      </div>

First I wanted to remove the numbers. Below code removed the numbers just fine.

 .views-content-counter{display: none;}

Next, I would like to place the active and inactive sliders on the same row and center but after I write the below css, I still see all the sliders/pagination on the same column aligned left instead.

 .active .views-field-counter {     padding: 1px;    margin: 1px;    width:20px;height:20px;border-radius:50px;font-size:20px;color:#fff;    text-align:center;background:red; }     .views-field-counter {    padding: 5px;    margin: 5px;    width:10px;height:10px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background: #5F9EA0;}

To center all the sliders, I wrote below css and did none:

.views-slideshow-controls-bottom {margin-left: auto; margin-right: auto;}

How can I place them on the same row and then center it?

 

Thanks.

Edited by newcoder1010
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...