Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1339037

    Hello,

    I would like to create a “manual rotation of logos” (with arrows on the left and right so that users can manually click on them to see more logos if they wish so) and am wondering what the best element / option is to do so.

    You can see an example attached in the screenshot below (highlighted in red).
    You can also see it here (https://www.rebootexperiences.com/) under the section “Upleveling leaders from”.

    Thank you in advance for your advice on this!

    #1339049

    Please also see screenshot attached of how I would like the Rotation to display on Mobile. This example is also from here (https://www.rebootexperiences.com/).

    #1339102

    Hi,
    Thanks for the link to your example site, although your screenshots require a login so we can’t see them. The slider is a open-source script Swiper you can download it and use it in a code block element on your site.
    Our Partner/Logo Element can also have the arrows on both sides, but the mobile touch will not be as good as the other script.
    You can also use another plugin with all of the options you want and add it’s shortcode into a code block element on your page.
    Hopefully one of these options will help you.

    Best regards,
    Mike

    #1339118

    Hi Mike,
    Thank you, this is very helpful! :-)
    Could you possibly point me to a guide on how to install the Swiper in a code block element on my site? I’m new to Enfold and WordPress, hence I’m not even sure what to search for – I’m keen on learning it though.
    Best regards,
    Markus

    #1339125

    Hi,
    I started to look into this for you, this is the page in the documentation for the core setup, and the demos are shown here, but after messing with it for a while I thought to look in the WordPress Plugins because typically open source projects have been turned into plugins, and I found it: Swiper Js Slider I tested this and the setup was very easy:
    2022-02-05_013.jpg
    I added the slider shortcode to a code block element inside a color section set to 100% height and a blue background
    2022-02-05_014.jpg
    the frontend results
    2022-02-05_015.jpg
    I linked to the test page below, please give this a try.

    Best regards,
    Mike

    #1339216

    Hi Mike,

    Thank you – the Swiper JS Slider works great!! :-)

    As you said, the implementation was very straight forward! There are 2 design/layout elements that I am not able to figure out though through the provided options:

    1) The Nagivation / Swiper elements on the left and right are showing on top of the logos on my page plus don’t fit the rest of the page design (please see my page attached). I don’t see how to modify this with the Swiper JS Slider. When you have a look at https://swiperjs.com/swiper-api#navigation, it gives a lot more variables compared to the ones I can see in WordPress. Is there a CSS or some other way in order to make the Navigation / Swiper elements look the same as on the Reboot Experiences example (please see link attached)?

    Also, is there a way to make the logos display a bit smaller? (That might also resolve the issue of the Navigation arrows showing on top of them)

    It seems to me that Reboot Experiences is using a swiper code from Elementor (https://elementor.com/widgets/), correct? Could that be integrated in case we don’t get the Swiper JS Slider to work / look properly?

    2) I would like to loop the slides so it doesn’t jump back to slide 1 when it reaches the end. I can see on https://swiperjs.com/swiper-api#navigation that the loop option should exist, however I cannot see it in the WordPress plugin. Do you have an idea how to enable the Loop?

    Thank you Mike, really appreciate your help!

    #1339217

    Please also see the 2 screenshots for reference (current status of my slider vs. Reboot Experience site)

    #1339238

    Hi,
    Thanks for the screenshots and feedback, I believe the script in the plugin is not as current as on the site, so all of the options are not the same, unfortunately I believe that even if we use the full script you will need to be able to make code changes to use it as it doesn’t have GUI.
    There are quite a lot of slider plugins available and most all of them would have shortcodes you can add to a code block element, I would recommend trying another one.
    Sorry, I thought this was going to work well, but sometimes it’s better to try another over fighting to make one fit.
    Please don’t add another builder to your site like Elementor or Visual Composer or WPBakery, Enfold is not meant to work with other builders.
    Here are the results for logo Slider which might be better geared towards your smaller image sizes that a full-size slider.

    Best regards,
    Mike

    #1339245

    Hi Mike,

    Thank you for your advice!

    How could I import the full script into WordPress to try it out?
    Looking at all the possibilities of it (https://swiperjs.com/swiper-api#navigation), I believe it could work.

    Will I still have an “interface” to easily try settings out with the full script or I can only do that manually in the script?

    Thanks,
    Markus

    #1339360

    Hi,
    You would need to make your adjustments in HTML, such as shown on the Getting Started page
    2022-02-07_001.jpg
    and add your Navigation Parameters to the initialize script
    2022-02-07_002.jpg
    For this example I used the Infinite loop with slides per group because it seems to be the closest to what you want.
    So first we need to import the core Swiper JS & CSS files and set the initialize script in our child theme functions.php file in Appearance ▸ Editor:

    function Swiper_from_CDN(){
        ?>
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
     <script>
    	 window.addEventListener('DOMContentLoaded', function() {
          var swiper = new Swiper(".mySwiper", {
            slidesPerView: 3,
            spaceBetween: 30,
            slidesPerGroup: 3,
            loop: true,
            loopFillGroupWithBlank: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
    		  });
        </script>
        <?php
        }
    add_action('wp_head', 'Swiper_from_CDN');

    Then on our test page in a code block element add this code:

    <style>
    .swiper {
            width: 100%;
            height: 100vh;
          }
    
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
    
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
          }
    
          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
    </style>   
    
     <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-pagination"></div>
        </div>

    the expected results should be:
    2022-02-07_003.jpg
    I linked to my working example below, so this should help you get started, you will still need to add your images, a little more css for style and any other parameters you wanted.

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.