oscarviedma

Slider vertical swiper js con divi por ov divi

May 10th, 2022 (edited)
1,788
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.39 KB | None | 0 0
  1. <!-- Swiper CDNs -->
  2. <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
  3. <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  4.  
  5. <script>
  6. jQuery(function($){
  7. // Envolver la seccion swiper-slide en un div swiper-wrapper
  8. $( ".swiper-slide" ).wrapAll( "<div class='swiper-wrapper' />");
  9.  
  10. // Envolver swiper-wrapper en un div swiper-container
  11. $( ".swiper-wrapper" ).wrap( "<div class='swiper ov-swiper-slider-vertical'></div>" );
  12.  
  13. // Insertar la paginacion swiper js
  14. $( "<div class='swiper-pagination'></div>" ).insertAfter( ".swiper-wrapper" );
  15.  
  16. });
  17. </script>
  18.  
  19. <script>
  20. jQuery(document).ready(function( $ ) {
  21. var ovSliderVertical = new Swiper(".ov-swiper-slider-vertical", {
  22. direction: 'vertical',
  23. slidesPerView: 1,
  24. speed: 1000,
  25. parallax: true,
  26. effect: "coverflow",
  27. touchReleaseOnEdges: true,
  28. mousewheel: {
  29. releaseOnEdges: true,
  30. sensitivity: 1,
  31. },
  32. pagination: {
  33. el: '.swiper-pagination',
  34. clickable: true,
  35. },
  36.  
  37. });
  38. });
  39. </script>
  40.  
  41.  
  42. <script>
  43. // Agregar atributos de swiper parallax
  44. jQuery(function($){
  45.  
  46. $( ".parallax-img" ).attr({
  47. "data-swiper-parallax":"-25%",
  48. "data-swiper-parallax-opacity":"0.5",
  49. "data-swiper-parallax-scale":"0.15"
  50. });
  51.  
  52. $( ".parallax-btn" ).attr({
  53. "data-swiper-parallax":"-100",
  54. });
  55.  
  56. });
  57. </script>
Add Comment
Please, Sign In to add comment