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

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #17804
    jascal
    Participant
    Purchased

    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!
    ________________AD__________________
    The User-friendly Owl Carousel slider editor in the ART WordPress theme

    Owl carousel Slider in SEA Creative Multi-Purpose WordPress Theme

    #17808
    SeaTheme
    Keymaster
    Purchased

    Hi,

    If displaying only one image per slide:

    Please add the singleItem: true for the call function, looks like:

       _carousel.owlCarousel({ 
                singleItem: true
            });
    

    readmore: http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/one.html

    If displaying one static image:

    Please use <img src="image-url" > tag instead of the owlcousel HTML structure

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #17810
    jascal
    Participant
    Purchased

    I mean for the slider template of a single portfolio.

    #17811
    SeaTheme
    Keymaster
    Purchased

    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 year, 3 months ago by SeaTheme.
    #17814
    jascal
    Participant
    Purchased
    This reply has been marked as private.
    #17816
    SeaTheme
    Keymaster
    Purchased
    This reply has been marked as private.
    #17944
    LaraMinerva
    Participant
    Purchased

    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
    SeaTheme
    Keymaster
    Purchased

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

    #17960
    LaraMinerva
    Participant
    Purchased

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

    #17964
    SeaTheme
    Keymaster
    Purchased

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

    Regards

    #17965
    LaraMinerva
    Participant
    Purchased
    #17966
    SeaTheme
    Keymaster
    Purchased

    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
    Purchased

    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 year, 2 months ago by jascal.
    • This reply was modified 1 year, 2 months ago by jascal.
    #17975
    SeaTheme
    Keymaster
    Purchased

    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

    #18072
    LaraMinerva
    Participant
    Purchased

    Hello I have another question. Is there a way to show the titles and maybe even image description of the images in the portfolio page slider? https://www.laraminerva.com/index.php/ux-portfolio/space/

    That would be so great 🙂

    Regards,
    Lara

    #18075
    SeaTheme
    Keymaster
    Purchased

    Hi,

    It isn’t possible by simple codes.

    Regards

Viewing 16 posts - 1 through 16 (of 16 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!