newcoder1010 Posted November 2, 2015 Share Posted November 2, 2015 (edited) 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 November 2, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now