Bugs, Future Request & Development

  • Hey again,
    I’ll say it again:
    This could be the best WordPress Swiper/Slide Plugin around the World, but only could :p

    Some Bugs/Peformance Issues:
    – Update to SwiperJS8
    – Don’t use jquery in- and outside of Gutenberg and Plugins ??
    – PHP 8.1 Support

    – Swiper Settings:
    — – Show Navigation/Pagination/Show Pagination dosn’t work/don’t save after submit. No navigation is showing after ‘save Page’
    – – <div> for Navigation/Pagination isn’t centered
    – – Type of pagination: What about the Scrollbar? Nice Feature!
    – – Slides per view: Dezimal Settings are uptodate like 4.1, best in terms of breakpoints
    – – Include :root{--swiper-theme-color:XXX} as Main Setting
    – – max-width only set in %, other missing like px/em/rem
    aso..

    I still have several ideas/wishes and ideas, so I would be happy if you continue.
    SwiperJS is now probably the most used tool in this area, but there is not a single good plugin yet. Gutenslider tries, but doesn’t work (yet).

    Unfortunately, I’m only a front-end developer, but would be willing to help.

    Additionally, I would be willing to hire a programmer to improve/further develop the plugin if you don’t want to do that.

    I have already considered a new development, hope for an answer ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter TwisteD

    (@twistedde)

    P.s. I’ll do a new Logo?! :p

    Plugin Author digitalapps

    (@digitalapps)

    Hi @twistedde

    thanks for your post.

    Ill update the plugin over the weekend, I have a lot of commitments with work and family at the moment thats why the slow progress.

    I appreciate you took the time to share your thoughts.

    About the logo, show me what you got:) I kinda like what I have now, but curious to see your idea for the logo.

    Can you elaborate why would you want this:
    Include :root{–swiper-theme-color:XXX} as Main Setting

    Give me an example, use case for this:
    – – Slides per view: Dezimal Settings are uptodate like 4.1, best in terms of breakpoints

    Thread Starter TwisteD

    (@twistedde)

    Hi,
    the variable :root{--swiper-theme-color:#colorhash is defined directly by SwiperJS (see css SwiperJS) and returns the color for swiper activities, e.g. active bullets, the swiper arrows etc.

    An example for dezimal is simple, open your Netflix App ?? -> Example

    I use Blocksy Theme with 1200px Container and own color palette.
    I will give you two examples of my swipers:

    Main inklude & CSS:

    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<style>
/*Slide Demo*/
.swiper-slide{text-align:center;font-size:18px;background:#fff;height:250px;border-radius:6px;box-shadow:0 1px 4px rgba(0,8,32,.2)}
/*Swiper JS*/
:root{--swiper-theme-color:var(--paletteColor1)}
.swiper{width:100%;max-width:var(--container-max-width);height:100%;padding:10px 3px!important}
@media(max-width:1200px){.swiper{padding:10px 5vw!important}.swiper-button-next,.swiper-button-prev{display:none!important}}
.swiper-slide{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-scrollbar{background:rgba(0,0,0,.04)}
.swiper-scrollbar-drag{background:var(--swiper-theme-color);opacity:.5}
</style>

    Snap Swiper:

    <div class="alignfull">

<div class="swiper swiper-snap">
  <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>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script>
var swiper = new Swiper('.swiper-snap', {
spaceBetween:15,
grabCursor:true,
navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},
pagination:{el:'.swiper-pagination',dynamicBullets:true,},
scrollbar:{el:'.swiper-scrollbar', hide:true,},
breakpoints:{
0:{slidesPerView:1.1,centeredSlides:true,centeredSlidesBounds:true,},
640:{slidesPerView:2.1,centeredSlides:true,centeredSlidesBounds:true,},
768:{slidesPerView:3.1,centeredSlides:true,centeredSlidesBounds:true,},
1024:{slidesPerView:4,},
}
});
</script>

</div>

    And FreeMode:

    <div class="alignfull">

<div class="swiper swiper-free-2">
  <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>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script>
var swiper = new Swiper('.swiper-free-2', {
freeMode:true,
momentumBounce:false,
spaceBetween:15,
grabCursor:true,
navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},
pagination:{el:'.swiper-pagination',dynamicBullets:true,},
scrollbar:{el:'.swiper-scrollbar', hide:true,},
breakpoints:{
0:{slidesPerView:2.1,},
640:{slidesPerView:3.1,},
768:{slidesPerView:4.1,},
1024:{slidesPerView:5.1,},
1200:{slidesPerView:6,},
}
});
</script>

</div>

    Try it by yourself and have a look ??

    If you like the Logo, everything is fine!

    Plugin Author digitalapps

    (@digitalapps)

    Hi @twistedde,

    Plugin has been updated. Here is what has been done so far:

    – Swiper bundle updated to the latest version
    – jquery removed
    – fixed the bug with navigation, pagination, transition styles.

    – In regards to slides per view, your desired effect can be achieved with CSS, so there’s no need for decimal numbers
    – Vertical div are being cantered vertically via position absolute + transforms
    – Horizontal cantered has been fixed. But can also be controlled via css.
    – max-width (px/%/em/rem) will be included in the next release

    – :root{–swiper-theme-color:XXX} , not sure if this needs to be managed from within the plugin. when you can self manage these via css. But probably will consider including color controls via plugin in the future. Just needs to balance performance vs ease of use.

    Let me know if theres anything you require asap

    Cheers

    Thread Starter TwisteD

    (@twistedde)

    Hi, thanks for your work =)

    Dynamic bullets and scrollbar would be nice, then I could even switch from my custom code to the plugin =)

    Thread Starter TwisteD

    (@twistedde)

    Sorry,

    Freemode & Snap Mode Setting is missing :-/

    • This reply was modified 2 years, 8 months ago by TwisteD.
    Plugin Author digitalapps

    (@digitalapps)

    whats are freemode and snap modes?

    • This reply was modified 2 years, 8 months ago by digitalapps.
    Thread Starter TwisteD

    (@twistedde)

    SwiperJS default is Snap-Mode:
    Demo: Snap Demo (default)
    API: API Default

    FreeMode:
    Demo: FreeMode Demo
    API: API FreeMode

    ======+++=====
    Requests :p

    Pagination dynamic Bullets
    Demo: See Demo
    API: API

    Scrollbar:
    Demo: Scrollbar Demo
    API: API

    • This reply was modified 2 years, 8 months ago by TwisteD.
    • This reply was modified 2 years, 8 months ago by TwisteD.
    • This reply was modified 2 years, 8 months ago by TwisteD.
    • This reply was modified 2 years, 8 months ago by TwisteD.
    • This reply was modified 2 years, 8 months ago by TwisteD.
    • This reply was modified 2 years, 8 months ago by TwisteD.
    Thread Starter TwisteD

    (@twistedde)

    And for
    freeMode:true,

    also add
    momentumBounce:false,

    for a better flow

    Thread Starter TwisteD

    (@twistedde)

    Hi,
    do you will ad the freemode and Scrollbar as Feature?

    I want to use the Plugin for my Site and go away from the Custom HTML ??????

    Take a look to my last two posts.

    Thank you ????

    Plugin Author digitalapps

    (@digitalapps)

    Hi @twistedde ,

    I started working on it, there are few options that come with a freeMode, will publish these with the next release

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Bugs, Future Request & Development’ is closed to new replies.