Swiper slider con las columnas

PHOTO

Wed Feb 22 2023 20:49:27 GMT+0000 (Coordinated Universal Time)

<script>
window.addEventListener('DOMContentLoaded', function() {
 
    const $ = jQuery;

    $( '.custom-swiper > .elementor-container' ).addClass( 'swiper-wrapper' );
    $( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
 
  var swiper = new Swiper('.custom-swiper', {
      
    // Default parameters
    slidesPerView: 2,
    spaceBetween: 10,
    // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
  
    });
 
});
</script>
<style>
    @media (max-width: 1024px) {
    .custom-swiper .elementor-container {
        flex-wrap:nowrap
    }
}
</style>

COPY

Codigo para el widget html. Cada slide es una columna de elementor. La seccion tiene que tener la clase .custom-swiper

Save snippets that work from anywhere online with our extensions

Comments

ELEMENTOR

@rstringa

Filtros avanzados en Elementor con WP_Query para el control de Posts • Curso de WordPress • WebProgramacion Consultoría Informática Elementor POPUPS - Casos Esperar a cargar todos los scripts Carousel inside Tabs Swiper slider con las columnas Carousel - Swiper de Elementor

#elementor #wordpress #jquery

Closes Elementor Popup On Click (Paste it in an HTML widget)

<script>
jQuery( document ).ready(function($){
	$(document).on('click','.elementor-location-popup a', function(event){
		elementorProFrontend.modules.popup.closePopup( {}, event);
	})
});
</script>

#php #wordpress #elementor

Disable Font Awesome in Elementor

//******--- Remove Font Awesome ---*****
//===============================
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

#php #wordpress #elementor

Disable Eicons in Elementor

//*****---  Remove Eicons:  ---*****
//==========================
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
	wp_deregister_style( 'elementor-icons' ); 
}

#php #wordpress #elementor

Disable Google Fonts in Elementor

******--- Remove Google Fonts ---******
//===============================
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

#elementor #snippets

@Shesek

https://www.thiscodeworks.com/user/Shesek

#elementor #css

Outline Heading Text CSS (Elementor)

selector {
     -webkit-text-stroke: 1px #C02727;
}

#elementor #wordpress

Custom CSS to fix Elementor columns gap issue | by Rich Flynn on SnipSave | Web-based code snippet manager for developers

/* Make Elementor elements expand to fit the full available width - due to how EL puts padding
all the way round columns */
.elementor-section-boxed .elementor-column-gap-default > .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}
.elementor-section-boxed .elementor-column-gap-narrow > .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
}
.elementor-section-boxed .elementor-column-gap-extended > .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}
.elementor-section-boxed .elementor-column-gap-wide > .elementor-row {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}
.elementor-section-boxed .elementor-column-gap-wider > .elementor-row {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
}

#css #elementor

3D EFFECT in Elementor

https://www.youtube.com/watch?v=H_8XBIElZlg

#embed-pdf #wordpress #elementor

Embedding PDF

<object data="PDF URL" type="application/pdf" width="700px" height="1200px">    
<embed src="PDF URL" />    
</object>

#htm #css #elementor

Smooth (linear) scroll - Elementor Carousel widget

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important; 
  transition-timing-function: linear !important; 
}

#htm #css #elementor

Smooth (linear) scroll - Elementor Crocoblock widgets

selector .slick-track{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

#popups #elementor

Elementor POPUPS - Casos

/* Hide when open popup */
jQuery(document).on("elementor/popup/show", (event, id, instance) => {
  if (id === 388) {
    setTimeout(function () {
      jQuery(".sticky-left-menu").hide();
    }, 1000);
  }
});

/* Show when close popup and not mobile */
jQuery(document).on("elementor/popup/hide", (event, id, instance) => {
  if (id === 388 && windowWidth >= 768) {
    setTimeout(function () {
      jQuery(".sticky-left-menu").show();
    }, 1000);
  }
  if (id === 388 && windowWidth <= 767) {
    jQuery(".sticky-left-menu").hide();
  }
});

#elementor #readystate

Esperar a cargar todos los scripts

  function removeActiveTab() {
      setTimeout(function() {
        if( $('body').hasClass("page-id-20504") ) {        
            $("#doing-green-tabs").find(".elementor-tab-title").removeClass("elementor-active"); 
            $("#doing-green-tabs").find(".elementor-tab-content").removeClass("elementor-active").hide();       
        }
      }, 10);
  }
  /* Esperar a cargar todos los scripts */ 
  if (document.readyState == 'complete') {
    removeActiveTab();
  } else {
      document.onreadystatechange = function () {
          if (document.readyState === "complete") {
            removeActiveTab();
          }
      }
  }

#elementor #readystate

Carousel inside Tabs

<script>
window.addEventListener('DOMContentLoaded', function() {

    const $ = jQuery;
 
    $('.elementor-tab-title').on('click', function() {
        setTimeout(function(){
             window.dispatchEvent(new Event('resize'));
        },100)
       
    });
 
});
</script>

#elementor #swiper

Swiper slider con las columnas

<script>
window.addEventListener('DOMContentLoaded', function() {
 
    const $ = jQuery;

    $( '.custom-swiper > .elementor-container' ).addClass( 'swiper-wrapper' );
    $( '.custom-swiper .swiper-wrapper > div' ).addClass( 'swiper-slide' );
 
  var swiper = new Swiper('.custom-swiper', {
      
    // Default parameters
    slidesPerView: 2,
    spaceBetween: 10,
    // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
  
    });
 
});
</script>
<style>
    @media (max-width: 1024px) {
    .custom-swiper .elementor-container {
        flex-wrap:nowrap
    }
}
</style>

Swiper slider con las columnas

Save snippets that work from anywhere online with our extensions

Comments

More like this

ELEMENTOR

Browse more snippets >>

Swiper slider con las columnas

Save snippets that work from anywhere online with our extensions

Comments

More like this

ELEMENTOR

Browse more snippets >>

Embed code snippet