Home Forums Art WordPress Theme How to display one image at the time with the owl slider?

This topic contains 13 replies, has 3 voices, and was last updated by  BWSM 1 week, 3 days ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #17804

    jascal
    Participant

    Dear,

    How can i have the owl carousel (slider) only display one image at a time instead of a few images the complete width of the page? I cant get it to work if i edit the custom.theme.js ..

    Thank you!

    #17808

    BWSM
    Keymaster

    Hi,

    What’s Slider you talked about? BM Slider or Slider template of the single portfolio?

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #17810

    jascal
    Participant

    I mean for the slider template of a single portfolio.

    #17811

    BWSM
    Keymaster

    Hi,
    Please find:
    /art-theme/template/single/project/slider.php line12 / 14

    data-center="true" update to data-center="false"

    data-autowidth="true" update to data-autowidth="false"

    Regards~

    • This reply was modified 1 month ago by  BWSM.
    #17814

    jascal
    Participant
    This reply has been marked as private.
    #17816

    BWSM
    Keymaster
    This reply has been marked as private.
    #17944

    LaraMinerva
    Participant

    I used this too. Great that it worked. But is there also a way to show the single images in the center of the page? At the moment the whole slider is on the left handside of the screen. I’d love to have it in the center.
    Thank you 🙂

    #17952

    BWSM
    Keymaster

    Please leave the issued webpage URL, I need to check the lived page, thanks!

    #17960

    LaraMinerva
    Participant

    I hope you can view this. I’d love to have the slider centered in the page.

    #17964

    BWSM
    Keymaster

    Hi LaraMinerva,
    I saw your question, I need to check your webpage.
    Please leave this issued webpage URL, thanks

    Regards

    #17965

    LaraMinerva
    Participant
    #17966

    BWSM
    Keymaster

    Please paste the custom css code to “Appearance > Customize : Additional CSS”:

    .single-portfolio-fullwidth-slider .owl-carousel .owl-item img {
        margin-left: auto; margin-right: auto;
    }
    #17972

    jascal
    Participant

    Somehow when i want owl carousel to show a single item it doesnt work. I add the following code in javascript, html and css. Is there maybe a conflict?? It still shows three images in my carousel. This should work according to the official owl-carousel page. Here is my link: http://jasencal.nl/owl-test/

       $(document).ready(function() {
         
          $("#owl-demo").owlCarousel({
         
              navigation : true, // Show next and prev buttons
              slideSpeed : 300,
              paginationSpeed : 400,
              singleItem:true
         
              // "singleItem:true" is a shortcut for:
              // items : 1, 
              // itemsDesktop : false,
              // itemsDesktopSmall : false,
              // itemsTablet: false,
              // itemsMobile : false
         
          });
         
        });
    

    For html:

    
        <div id="owl-demo" class="owl-carousel owl-theme">
         
          <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
          <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
          <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
         
        </div>
    

    for CSS:

    
        #owl-demo .item img{
            display: block;
            width: 100%;
            height: auto;
        }
    • This reply was modified 1 week, 4 days ago by  jascal.
    • This reply was modified 1 week, 4 days ago by  jascal.
    #17975

    BWSM
    Keymaster

    HI,

    Yes, it would conflict with the theme. Please remove the class name owl-carousel from HTML.
    Please don’t comment items : 1, in javascript

    Regards

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!