HTML&CSS Archives - Codeplaners

Attribute Types of ol and ul

admin — Sun, 29 Dec 2024 04:47:04 +0000

This post was last updated on January 1st, 2025 at 06:37 am

Hi Dev,

Today in this article we will understand how many attribute types of ol and ul are there in HTML and how to use them. Let’s discuss the attribute types of ol and ul.

So let’s follow few step to create example of attribute types of ol and ul.

ul type Attribute

Example ul type attribute:





   HTML ul type attribute



   codeplaners

   HTML ul type attribute

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text

Preview:-

ol type Attribute

Example ol type attribute:





   HTML ol type attribute



   codeplaners

   HTML ol type attribute

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

   
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
   

      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text
      Lorem Text

Preview:-

I hope it will assist you…

The post Attribute Types of ol and ul appeared first on Codeplaners.

Stories Slide Example

admin — Sat, 29 Jun 2024 05:16:58 +0000

This post was last updated on January 1st, 2025 at 06:40 am

Hi dev,

Today, i show you stories slide example. In this article I will tell you how to create cloned instagram stories slide using javascript. you will Stories Slide Example. In this article, we will implement a Stories Slide Example.

So, let’s follow few steps to create example of stories slide example.

Preview:-

Index.html






  
  
  codeplaners Slider
  
  



  
    
    
      
      
        Code Planers Stories
      
      
        
          
            
          
          mark_johnson
        
        
          
            
          
          malenia
        
        
          
            
          
          john1986
        
      
      
    


    
    
      
        
          
          
            
              
                
                
                  
                    
                      
                    
                    mark_johnson
                    21h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    mark_johnson
                    12h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    mark_johnson
                    2h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    mark_johnson
                    30m
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    mark_johnson
                    15m
                  
                  
                    
                  
                  
                    
                  
                
              
            
          
          
          
            
              
                
                
                  
                    
                      
                    
                    malenia
                    5h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    malenia
                    45m
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    malenia
                    5m
                  
                  
                    
                  
                  
                    
                  
                
              
            
          
          
          
            
              
                
                
                  
                    
                      
                    
                    john1986
                    15h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    john1986
                    10h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    john1986
                    10h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    john1986
                    8h
                  
                  
                    
                  
                  
                    
                  
                
                
                
                  
                    
                      
                    
                    john1986
                    47m

style.css

:root {
    --codeplaners-slider-z-shadows: 999;
    --codeplaners-slider-z-pagination: 50;
    --codeplaners-slider-z-navigation: 200;
    --codeplaners-slider-z-user: 300;
    --codeplaners-slider-z-actions: 300;
    --codeplaners-slider-z-content: 100;
    --codeplaners-slider-slide-bg-color: #000
}

.codeplaners-slider {
    padding-top: 44px;
    padding-bottom: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center
}

.codeplaners-slider>.swiper>.swiper-wrapper>.swiper-slide:not(.swiper-slide-next, .swiper-slide-prev, .swiper-slide-active) {
    opacity: 0
}

.codeplaners-slider>.swiper>.swiper-wrapper>.swiper-slide-next+.swiper-slide {
    opacity: 1
}

.codeplaners-slider .swiper {
    height: 100%;
    width: 100%
}

.codeplaners-slider .swiper .swiper .swiper-slide {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--codeplaners-slider-slide-bg-color)
}

.codeplaners-slider .swiper .swiper-slide-shadow-left,
.codeplaners-slider .swiper .swiper-slide-shadow-right {
    z-index: var(--codeplaners-slider-z-shadows) !important
}

.codeplaners-slider .swiper .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, .5))
}

.codeplaners-slider .swiper .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, .5))
}

.codeplaners-slider.codeplaners-slider-perspective .swiper .swiper,
.codeplaners-slider.codeplaners-slider-perspective .swiper-slide-shadow-left,
.codeplaners-slider.codeplaners-slider-perspective .swiper-slide-shadow-right {
    transform: translateZ(calc(-1 * var(--swiper-cube-translate-z)));
    transform-origin: 0% 0% calc(-1 * var(--swiper-cube-translate-z))
}

.codeplaners-slider-button {
    position: absolute;
    z-index: var(--codeplaners-slider-z-navigation);
    top: 0;
    height: 100%;
    user-select: none;
    -webkit-user-select: none
}

.codeplaners-slider-button:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-duration: .2s
}

.codeplaners-slider-button:active:before {
    opacity: .25
}

.codeplaners-slider-button-prev {
    left: 0;
    width: 30%
}

.codeplaners-slider-button-prev:before {
    background-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0))
}

.codeplaners-slider-button-next {
    right: 0;
    width: 70%
}

.codeplaners-slider-button-next:before {
    background-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0))
}

.codeplaners-slider-pagination {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    display: flex;
    justify-content: space-between;
    z-index: var(--codeplaners-slider-z-pagination);
    pointer-events: none;
    transform: translateZ(0)
}

.codeplaners-slider-pagination-bullet {
    width: 100%;
    flex-shrink: 10;
    border-radius: 999px;
    height: 2px;
    background: rgba(255, 255, 255, .35);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px #00000059
}

.codeplaners-slider-pagination-bullet span {
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    transform: translate(-100%);
    transition-timing-function: linear
}

.codeplaners-slider-pagination-bullet-viewed span {
    transform: translate(0);
    transition-duration: 0ms !important
}

.codeplaners-slider-pagination-bullet+.codeplaners-slider-pagination-bullet {
    margin-left: 2px
}

a.codeplaners-slider-user,
.codeplaners-slider-user a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition-duration: .2s
}

a.codeplaners-slider-user:active,
.codeplaners-slider-user a:active {
    opacity: .55
}

.codeplaners-slider-user {
    display: flex;
    align-items: center;
    position: absolute;
    top: 18px;
    left: 12px;
    height: 32px;
    z-index: var(--codeplaners-slider-z-user);
    color: #fff;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none
}

.codeplaners-slider-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px
}

.codeplaners-slider-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center
}

.codeplaners-slider-user-name {
    font-size: 14px;
    font-weight: 700;
    margin-right: 12px;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, .35)
}

.codeplaners-slider-user-date {
    font-size: 14px;
    font-weight: 400;
    opacity: .55;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, .35)
}

.codeplaners-slider-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 10px;
    top: 18px;
    height: 32px;
    z-index: var(--codeplaners-slider-z-actions);
    transition-duration: .2s;
    user-select: none;
    -webkit-user-select: none
}

.codeplaners-slider-close-button {
    margin-left: 18px;
    width: 22px;
    height: 22px;
    appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
    display: block;
    position: relative;
    cursor: pointer;
    padding: 0;
    background: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    -webkit-user-select: none
}

.codeplaners-slider-close-button:before,
.codeplaners-slider-close-button:after {
    content: "";
    width: 125%;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    box-shadow: 0 0 1px #00000059
}

.codeplaners-slider-close-button:before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.codeplaners-slider-close-button:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.codeplaners-slider-close-button:active {
    opacity: .55
}

.codeplaners-slider-content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--codeplaners-slider-z-content);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none
}

.codeplaners-slider-content>img,
.codeplaners-slider-content>video {
    width: 100%;
    height: 100%;
    object-position: center;
    display: block;
    border: none;
    outline: none;
    background: none;
    background-color: transparent
}

.codeplaners-slider-content>img {
    object-fit: cover
}

.codeplaners-slider-content>video {
    object-fit: contain
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper,
swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide,
swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev,
.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-filter: blur(50px);
    filter: blur(50px)
}

* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html,
body {
    position: relative;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
    height: 100%
}

body {
    color: #fff;
    line-height: 1.5;
    font-family: -apple-system, system-ui, Helvetica Neue, Helvetica, Arial, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#app {
    height: 100%
}

.demo-app {
    overflow: auto;
    height: 100%
}

.demo-title {
    padding: 24px 12px 12px
}

.demo-codeplaners {
    display: flex;
    align-items: center;
    padding: 12px;
    overflow: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #262626
}

.demo-codeplaners::-webkit-scrollbar {
    display: none;
    opacity: 0
}

.demo-codeplaners a+a {
    margin-left: 12px
}

.demo-codeplaners a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-duration: .3s;
    transition-property: opacity
}

.demo-codeplaners a:active {
    opacity: .55;
    transition-duration: 50ms
}

.demo-codeplaners-avatar {
    position: relative;
    border-radius: 50%;
    padding: 4px;
    background-image: linear-gradient(to right top, #ffc600 20%, #ff0040, #e600cc 80%)
}

.demo-codeplaners-avatar:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    background: #000;
    border-radius: 50%;
    z-index: 1
}

.demo-codeplaners-avatar img {
    position: relative;
    z-index: 2;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center
}

.demo-codeplaners-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    margin-top: 10px
}

.demo-post-header {
    display: flex;
    align-items: center;
    padding: 8px
}

.demo-post-header-actions {
    appearance: none;
    padding: 0;
    border: none;
    outline: 0;
    position: relative;
    box-shadow: none;
    border-radius: 0;
    background: none;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition-duration: .3s;
    transition-property: opacity
}

.demo-post-header-actions:active {
    opacity: .55;
    transition-duration: 50ms
}

.demo-post-header-actions span {
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%
}

.demo-post-header-actions span+span {
    margin-left: 3px
}

.demo-post-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 8px;
    padding: 2px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    background-image: linear-gradient(to right top, #ffc600 20%, #ff0040, #e600cc 80%);
    transition-property: opacity;
    transition-duration: .2s
}

.demo-post-avatar:active {
    opacity: .55;
    transition-duration: 0
}

.demo-post-avatar:before {
    content: "";
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: #000;
    position: absolute;
    border-radius: 50%;
    z-index: 0
}

.demo-post-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1
}

.demo-post-name {
    font-size: 14px;
    font-weight: 600
}

.demo-post-image {
    height: 320px
}

.demo-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.demo-post-footer {
    padding: 16px
}

.demo-post-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px
}

.demo-post-footer-actions-left,
.demo-post-footer-actions-right {
    display: flex;
    align-items: center
}

.demo-post-footer-actions button {
    appearance: none;
    border: none;
    outline: 0;
    position: relative;
    box-shadow: none;
    border-radius: 0;
    background: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition-duration: .3s;
    transition-property: opacity;
    padding: 0;
    margin: 0
}

.demo-post-footer-actions button:active {
    opacity: .55;
    transition-duration: 50ms
}

.demo-post-footer-actions button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    object-position: center
}

.demo-post-footer-actions button+button {
    margin-left: 16px
}

.demo-post-likes {
    font-size: 14px;
    font-weight: 600
}

.demo-post-content {
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.25
}

.demo-post-content-name {
    font-weight: 600
}

.demo-post-content-text {
    opacity: .85
}

.demo-post-date {
    margin-top: 4px;
    font-size: 12px;
    opacity: .5;
    font-weight: 500
}

.codeplaners-slider {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    transform: scale(0);
    transform: translateZ(0) scale(.5);
    opacity: 0;
    background: #000
}

@media (min-width: 415px),
(min-height: 897px) {
    .codeplaners-slider {
        background: rgb(41, 40, 49)
    }
}

.codeplaners-slider>.swiper {
    z-index: 2;
    max-width: 414px;
    max-height: 896px
}

.codeplaners-slider:not(.codeplaners-slider-in) {
    pointer-events: none
}

.codeplaners-slider:not(.codeplaners-slider-in) * {
    pointer-events: none !important
}

.codeplaners-slider-in {
    animation: codeplaners-slider-in .4s forwards;
    pointer-events: auto;
    transform: translateZ(0) scale(1);
    opacity: 1
}

.codeplaners-slider-out {
    pointer-events: none;
    animation: codeplaners-slider-out .4s forwards !important
}

@keyframes codeplaners-slider-in {
    0% {
        transform: translateZ(0) scale(.5);
        opacity: 0
    }

    50% {
        transform: translateZ(0) scale(1.05);
        opacity: 1
    }

    to {
        transform: translateZ(0) scale(1);
        opacity: 1
    }
}

@keyframes codeplaners-slider-out {
    0% {
        transform: translateZ(0) scale(1);
        opacity: 1
    }

    50% {
        transform: translateZ(0) scale(.5);
        opacity: 0
    }

    to {
        transform: translateZ(0) scale(.5);
        opacity: 0
    }
}

index.js

const Me = function () {
    const e = document.createElement("link").relList;
    if (e && e.supports && e.supports("modulepreload")) return;
    for (const n of document.querySelectorAll('link[rel="modulepreload"]')) i(n);
    new MutationObserver(n => {
       for (const r of n)
          if (r.type === "childList")
             for (const o of r.addedNodes) o.tagName === "LINK" && o.rel === "modulepreload" && i(o)
    }).observe(document, {
       childList: !0,
       subtree: !0
    });
 
    function s(n) {
       const r = {};
       return n.integrity && (r.integrity = n.integrity), n.referrerpolicy && (r.referrerPolicy = n.referrerpolicy), n.crossorigin === "use-credentials" ? r.credentials = "include" : n.crossorigin === "anonymous" ? r.credentials = "omit" : r.credentials = "same-origin", r
    }
 
    function i(n) {
       if (n.ep) return;
       n.ep = !0;
       const r = s(n);
       fetch(n.href, r)
    }
 };
 Me();
 
 function pe(t) {
    return t !== null && typeof t == "object" && "constructor" in t && t.constructor === Object
 }
 
 function ce(t = {}, e = {}) {
    Object.keys(e).forEach(s => {
       typeof t[s] == "undefined" ? t[s] = e[s] : pe(e[s]) && pe(t[s]) && Object.keys(e[s]).length > 0 && ce(t[s], e[s])
    })
 }
 const Te = {
    body: {},
    addEventListener() {},
    removeEventListener() {},
    activeElement: {
       blur() {},
       nodeName: ""
    },
    querySelector() {
       return null
    },
    querySelectorAll() {
       return []
    },
    getElementById() {
       return null
    },
    createEvent() {
       return {
          initEvent() {}
       }
    },
    createElement() {
       return {
          children: [],
          childNodes: [],
          style: {},
          setAttribute() {},
          getElementsByTagName() {
             return []
          }
       }
    },
    createElementNS() {
       return {}
    },
    importNode() {
       return null
    },
    location: {
       hash: "",
       host: "",
       hostname: "",
       href: "",
       origin: "",
       pathname: "",
       protocol: "",
       search: ""
    }
 };
 
 function W() {
    const t = typeof document != "undefined" ? document : {};
    return ce(t, Te), t
 }
 const Pe = {
    document: Te,
    navigator: {
       userAgent: ""
    },
    location: {
       hash: "",
       host: "",
       hostname: "",
       href: "",
       origin: "",
       pathname: "",
       protocol: "",
       search: ""
    },
    history: {
       replaceState() {},
       pushState() {},
       go() {},
       back() {}
    },
    CustomEvent: function () {
       return this
    },
    addEventListener() {},
    removeEventListener() {},
    getComputedStyle() {
       return {
          getPropertyValue() {
             return ""
          }
       }
    },
    Image() {},
    Date() {},
    screen: {},
    setTimeout() {},
    clearTimeout() {},
    matchMedia() {
       return {}
    },
    requestAnimationFrame(t) {
       return typeof setTimeout == "undefined" ? (t(), null) : setTimeout(t, 0)
    },
    cancelAnimationFrame(t) {
       typeof setTimeout != "undefined" && clearTimeout(t)
    }
 };
 
 function B() {
    const t = typeof window != "undefined" ? window : {};
    return ce(t, Pe), t
 }
 
 function Ce(t) {
    const e = t;
    Object.keys(e).forEach(s => {
       try {
          e[s] = null
       } catch {}
       try {
          delete e[s]
       } catch {}
    })
 }
 
 function de(t, e = 0) {
    return setTimeout(t, e)
 }
 
 function U() {
    return Date.now()
 }
 
 function Le(t) {
    const e = B();
    let s;
    return e.getComputedStyle && (s = e.getComputedStyle(t, null)), !s && t.currentStyle && (s = t.currentStyle), s || (s = t.style), s
 }
 
 function Ae(t, e = "x") {
    const s = B();
    let i, n, r;
    const o = Le(t);
    return s.WebKitCSSMatrix ? (n = o.transform || o.webkitTransform, n.split(",").length > 6 && (n = n.split(", ").map(a => a.replace(",", ".")).join(", ")), r = new s.WebKitCSSMatrix(n === "none" ? "" : n)) : (r = o.MozTransform || o.OTransform || o.MsTransform || o.msTransform || o.transform || o.getPropertyValue("transform").replace("translate(", "matrix(1, 0, 0, 1,"), i = r.toString().split(",")), e === "x" && (s.WebKitCSSMatrix ? n = r.m41 : i.length === 16 ? n = parseFloat(i[12]) : n = parseFloat(i[4])), e === "y" && (s.WebKitCSSMatrix ? n = r.m42 : i.length === 16 ? n = parseFloat(i[13]) : n = parseFloat(i[5])), n || 0
 }
 
 function J(t) {
    return typeof t == "object" && t !== null && t.constructor && Object.prototype.toString.call(t).slice(8, -1) === "Object"
 }
 
 function Ie(t) {
    return typeof window != "undefined" && typeof window.HTMLElement != "undefined" ? t instanceof HTMLElement : t && (t.nodeType === 1 || t.nodeType === 11)
 }
 
 function N(...t) {
    const e = Object(t[0]),
       s = ["__proto__", "constructor", "prototype"];
    for (let i = 1; i < t.length; i += 1) {
       const n = t[i];
       if (n != null && !Ie(n)) {
          const r = Object.keys(Object(n)).filter(o => s.indexOf(o) < 0);
          for (let o = 0, a = r.length; o < a; o += 1) {
             const l = r[o],
                d = Object.getOwnPropertyDescriptor(n, l);
             d !== void 0 && d.enumerable && (J(e[l]) && J(n[l]) ? n[l].__swiper__ ? e[l] = n[l] : N(e[l], n[l]) : !J(e[l]) && J(n[l]) ? (e[l] = {}, n[l].__swiper__ ? e[l] = n[l] : N(e[l], n[l])) : e[l] = n[l])
          }
       }
    }
    return e
 }
 
 function Q(t, e, s) {
    t.style.setProperty(e, s)
 }
 
 function be({
    swiper: t,
    targetPosition: e,
    side: s
 }) {
    const i = B(),
       n = -t.translate;
    let r = null,
       o;
    const a = t.params.speed;
    t.wrapperEl.style.scrollSnapType = "none", i.cancelAnimationFrame(t.cssModeFrameID);
    const l = e > n ? "next" : "prev",
       d = (c, p) => l === "next" && c >= p || l === "prev" && c <= p,
       u = () => {
          o = new Date().getTime(), r === null && (r = o);
          const c = Math.max(Math.min((o - r) / a, 1), 0),
             p = .5 - Math.cos(c * Math.PI) / 2;
          let f = n + p * (e - n);
          if (d(f, e) && (f = e), t.wrapperEl.scrollTo({
                [s]: f
             }), d(f, e)) {
             t.wrapperEl.style.overflow = "hidden", t.wrapperEl.style.scrollSnapType = "", setTimeout(() => {
                t.wrapperEl.style.overflow = "", t.wrapperEl.scrollTo({
                   [s]: f
                })
             }), i.cancelAnimationFrame(t.cssModeFrameID);
             return
          }
          t.cssModeFrameID = i.requestAnimationFrame(u)
       };
    u()
 }
 
 function R(t, e = "") {
    return [...t.children].filter(s => s.matches(e))
 }
 
 function Y(t, e = []) {
    const s = document.createElement(t);
    return s.classList.add(...Array.isArray(e) ? e : [e]), s
 }
 
 function ze(t, e) {
    const s = [];
    for (; t.previousElementSibling;) {
       const i = t.previousElementSibling;
       e ? i.matches(e) && s.push(i) : s.push(i), t = i
    }
    return s
 }
 
 function Oe(t, e) {
    const s = [];
    for (; t.nextElementSibling;) {
       const i = t.nextElementSibling;
       e ? i.matches(e) && s.push(i) : s.push(i), t = i
    }
    return s
 }
 
 function _(t, e) {
    return B().getComputedStyle(t, null).getPropertyValue(e)
 }
 
 function j(t) {
    let e = t,
       s;
    if (e) {
       for (s = 0;
          (e = e.previousSibling) !== null;) e.nodeType === 1 && (s += 1);
       return s
    }
 }
 
 function ke(t, e) {
    const s = [];
    let i = t.parentElement;
    for (; i;) e ? i.matches(e) && s.push(i) : s.push(i), i = i.parentElement;
    return s
 }
 
 function he(t, e, s) {
    const i = B();
    return s ? t[e === "width" ? "offsetWidth" : "offsetHeight"] + parseFloat(i.getComputedStyle(t, null).getPropertyValue(e === "width" ? "margin-right" : "margin-top")) + parseFloat(i.getComputedStyle(t, null).getPropertyValue(e === "width" ? "margin-left" : "margin-bottom")) : t.offsetWidth
 }
 let re;
 
 function Ge() {
    const t = B(),
       e = W();
    return {
       smoothScroll: e.documentElement && "scrollBehavior" in e.documentElement.style,
       touch: !!("ontouchstart" in t || t.DocumentTouch && e instanceof t.DocumentTouch)
    }
 }
 
 function ye() {
    return re || (re = Ge()), re
 }
 let ne;
 
 function $e({
    userAgent: t
 } = {}) {
    const e = ye(),
       s = B(),
       i = s.navigator.platform,
       n = t || s.navigator.userAgent,
       r = {
          ios: !1,
          android: !1
       },
       o = s.screen.width,
       a = s.screen.height,
       l = n.match(/(Android);?[\s\/]+([\d.]+)?/);
    let d = n.match(/(iPad).*OS\s([\d_]+)/);
    const u = n.match(/(iPod)(.*OS\s([\d_]+))?/),
       c = !d && n.match(/(iPhone\sOS|iOS)\s([\d_]+)/),
       p = i === "Win32";
    let f = i === "MacIntel";
    const w = ["1024x1366", "1366x1024", "834x1194", "1194x834", "834x1112", "1112x834", "768x1024", "1024x768", "820x1180", "1180x820", "810x1080", "1080x810"];
    return !d && f && e.touch && w.indexOf(`${o}x${a}`) >= 0 && (d = n.match(/(Version)\/([\d.]+)/), d || (d = [0, 1, "13_0_0"]), f = !1), l && !p && (r.os = "android", r.android = !0), (d || c || u) && (r.os = "ios", r.ios = !0), r
 }
 
 function De(t = {}) {
    return ne || (ne = $e(t)), ne
 }
 let ae;
 
 function Ve() {
    const t = B();
    let e = !1;
 
    function s() {
       const i = t.navigator.userAgent.toLowerCase();
       return i.indexOf("safari") >= 0 && i.indexOf("chrome") < 0 && i.indexOf("android") < 0
    }
    if (s()) {
       const i = String(t.navigator.userAgent);
       if (i.includes("Version/")) {
          const [n, r] = i.split("Version/")[1].split(" ")[0].split(".").map(o => Number(o));
          e = n < 16 || n === 16 && r < 2
       }
    }
    return {
       isSafari: e || s(),
       needPerspectiveFix: e,
       isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(t.navigator.userAgent)
    }
 }
 
 function Ne() {
    return ae || (ae = Ve()), ae
 }
 
 function Be({
    swiper: t,
    on: e,
    emit: s
 }) {
    const i = B();
    let n = null,
       r = null;
    const o = () => {
          !t || t.destroyed || !t.initialized || (s("beforeResize"), s("resize"))
       },
       a = () => {
          !t || t.destroyed || !t.initialized || (n = new ResizeObserver(u => {
             r = i.requestAnimationFrame(() => {
                const {
                   width: c,
                   height: p
                } = t;
                let f = c,
                   w = p;
                u.forEach(({
                   contentBoxSize: m,
                   contentRect: T,
                   target: S
                }) => {
                   S && S !== t.el || (f = T ? T.width : (m[0] || m).inlineSize, w = T ? T.height : (m[0] || m).blockSize)
                }), (f !== c || w !== p) && o()
             })
          }), n.observe(t.el))
       },
       l = () => {
          r && i.cancelAnimationFrame(r), n && n.unobserve && t.el && (n.unobserve(t.el), n = null)
       },
       d = () => {
          !t || t.destroyed || !t.initialized || s("orientationchange")
       };
    e("init", () => {
       if (t.params.resizeObserver && typeof i.ResizeObserver != "undefined") {
          a();
          return
       }
       i.addEventListener("resize", o), i.addEventListener("orientationchange", d)
    }), e("destroy", () => {
       l(), i.removeEventListener("resize", o), i.removeEventListener("orientationchange", d)
    })
 }
 
 function Fe({
    swiper: t,
    extendParams: e,
    on: s,
    emit: i
 }) {
    const n = [],
       r = B(),
       o = (d, u = {}) => {
          const c = r.MutationObserver || r.WebkitMutationObserver,
             p = new c(f => {
                if (f.length === 1) {
                   i("observerUpdate", f[0]);
                   return
                }
                const w = function () {
                   i("observerUpdate", f[0])
                };
                r.requestAnimationFrame ? r.requestAnimationFrame(w) : r.setTimeout(w, 0)
             });
          p.observe(d, {
             attributes: typeof u.attributes == "undefined" ? !0 : u.attributes,
             childList: typeof u.childList == "undefined" ? !0 : u.childList,
             characterData: typeof u.characterData == "undefined" ? !0 : u.characterData
          }), n.push(p)
       },
       a = () => {
          if (!!t.params.observer) {
             if (t.params.observeParents) {
                const d = ke(t.el);
                for (let u = 0; u < d.length; u += 1) o(d[u])
             }
             o(t.el, {
                childList: t.params.observeSlideChildren
             }), o(t.wrapperEl, {
                attributes: !1
             })
          }
       },
       l = () => {
          n.forEach(d => {
             d.disconnect()
          }), n.splice(0, n.length)
       };
    e({
       observer: !1,
       observeParents: !1,
       observeSlideChildren: !1
    }), s("init", a), s("destroy", l)
 }
 var He = {
    on(t, e, s) {
       const i = this;
       if (!i.eventsListeners || i.destroyed || typeof e != "function") return i;
       const n = s ? "unshift" : "push";
       return t.split(" ").forEach(r => {
          i.eventsListeners[r] || (i.eventsListeners[r] = []), i.eventsListeners[r][n](e)
       }), i
    },
    once(t, e, s) {
       const i = this;
       if (!i.eventsListeners || i.destroyed || typeof e != "function") return i;
 
       function n(...r) {
          i.off(t, n), n.__emitterProxy && delete n.__emitterProxy, e.apply(i, r)
       }
       return n.__emitterProxy = e, i.on(t, n, s)
    },
    onAny(t, e) {
       const s = this;
       if (!s.eventsListeners || s.destroyed || typeof t != "function") return s;
       const i = e ? "unshift" : "push";
       return s.eventsAnyListeners.indexOf(t) < 0 && s.eventsAnyListeners[i](t), s
    },
    offAny(t) {
       const e = this;
       if (!e.eventsListeners || e.destroyed || !e.eventsAnyListeners) return e;
       const s = e.eventsAnyListeners.indexOf(t);
       return s >= 0 && e.eventsAnyListeners.splice(s, 1), e
    },
    off(t, e) {
       const s = this;
       return !s.eventsListeners || s.destroyed || !s.eventsListeners || t.split(" ").forEach(i => {
          typeof e == "undefined" ? s.eventsListeners[i] = [] : s.eventsListeners[i] && s.eventsListeners[i].forEach((n, r) => {
             (n === e || n.__emitterProxy && n.__emitterProxy === e) && s.eventsListeners[i].splice(r, 1)
          })
       }), s
    },
    emit(...t) {
       const e = this;
       if (!e.eventsListeners || e.destroyed || !e.eventsListeners) return e;
       let s, i, n;
       return typeof t[0] == "string" || Array.isArray(t[0]) ? (s = t[0], i = t.slice(1, t.length), n = e) : (s = t[0].events, i = t[0].data, n = t[0].context || e), i.unshift(n), (Array.isArray(s) ? s : s.split(" ")).forEach(o => {
          e.eventsAnyListeners && e.eventsAnyListeners.length && e.eventsAnyListeners.forEach(a => {
             a.apply(n, [o, ...i])
          }), e.eventsListeners && e.eventsListeners[o] && e.eventsListeners[o].forEach(a => {
             a.apply(n, i)
          })
       }), e
    }
 };
 
 function qe() {
    const t = this;
    let e, s;
    const i = t.el;
    typeof t.params.width != "undefined" && t.params.width !== null ? e = t.params.width : e = i.clientWidth, typeof t.params.height != "undefined" && t.params.height !== null ? s = t.params.height : s = i.clientHeight, !(e === 0 && t.isHorizontal() || s === 0 && t.isVertical()) && (e = e - parseInt(_(i, "padding-left") || 0, 10) - parseInt(_(i, "padding-right") || 0, 10), s = s - parseInt(_(i, "padding-top") || 0, 10) - parseInt(_(i, "padding-bottom") || 0, 10), Number.isNaN(e) && (e = 0), Number.isNaN(s) && (s = 0), Object.assign(t, {
       width: e,
       height: s,
       size: t.isHorizontal() ? e : s
    }))
 }
 
 function _e() {
    const t = this;
 
    function e(v) {
       return t.isHorizontal() ? v : {
          width: "height",
          "margin-top": "margin-left",
          "margin-bottom ": "margin-right",
          "margin-left": "margin-top",
          "margin-right": "margin-bottom",
          "padding-left": "padding-top",
          "padding-right": "padding-bottom",
          marginRight: "marginBottom"
       } [v]
    }
 
    function s(v, E) {
       return parseFloat(v.getPropertyValue(e(E)) || 0)
    }
    const i = t.params,
       {
          wrapperEl: n,
          slidesEl: r,
          size: o,
          rtlTranslate: a,
          wrongRTL: l
       } = t,
       d = t.virtual && i.virtual.enabled,
       u = d ? t.virtual.slides.length : t.slides.length,
       c = R(r, `.${t.params.slideClass}, swiper-slide`),
       p = d ? t.virtual.slides.length : c.length;
    let f = [];
    const w = [],
       m = [];
    let T = i.slidesOffsetBefore;
    typeof T == "function" && (T = i.slidesOffsetBefore.call(t));
    let S = i.slidesOffsetAfter;
    typeof S == "function" && (S = i.slidesOffsetAfter.call(t));
    const P = t.snapGrid.length,
       g = t.slidesGrid.length;
    let b = i.spaceBetween,
       y = -T,
       x = 0,
       I = 0;
    if (typeof o == "undefined") return;
    typeof b == "string" && b.indexOf("%") >= 0 && (b = parseFloat(b.replace("%", "")) / 100 * o), t.virtualSize = -b, c.forEach(v => {
       a ? v.style.marginLeft = "" : v.style.marginRight = "", v.style.marginBottom = "", v.style.marginTop = ""
    }), i.centeredSlides && i.cssMode && (Q(n, "--swiper-centered-offset-before", ""), Q(n, "--swiper-centered-offset-after", ""));
    const O = i.grid && i.grid.rows > 1 && t.grid;
    O && t.grid.initSlides(p);
    let z;
    const V = i.slidesPerView === "auto" && i.breakpoints && Object.keys(i.breakpoints).filter(v => typeof i.breakpoints[v].slidesPerView != "undefined").length > 0;
    for (let v = 0; v < p; v += 1) {
       z = 0;
       let E;
       if (c[v] && (E = c[v]), O && t.grid.updateSlide(v, E, p, e), !(c[v] && _(E, "display") === "none")) {
          if (i.slidesPerView === "auto") {
             V && (c[v].style[e("width")] = "");
             const L = getComputedStyle(E),
                D = E.style.transform,
                X = E.style.webkitTransform;
             if (D && (E.style.transform = "none"), X && (E.style.webkitTransform = "none"), i.roundLengths) z = t.isHorizontal() ? he(E, "width", !0) : he(E, "height", !0);
             else {
                const Z = s(L, "width"),
                   fe = s(L, "padding-left"),
                   ue = s(L, "padding-right"),
                   te = s(L, "margin-left"),
                   se = s(L, "margin-right"),
                   h = L.getPropertyValue("box-sizing");
                if (h && h === "border-box") z = Z + te + se;
                else {
                   const {
                      clientWidth: M,
                      offsetWidth: C
                   } = E;
                   z = Z + fe + ue + te + se + (C - M)
                }
             }
             D && (E.style.transform = D), X && (E.style.webkitTransform = X), i.roundLengths && (z = Math.floor(z))
          } else z = (o - (i.slidesPerView - 1) * b) / i.slidesPerView, i.roundLengths && (z = Math.floor(z)), c[v] && (c[v].style[e("width")] = `${z}px`);
          c[v] && (c[v].swiperSlideSize = z), m.push(z), i.centeredSlides ? (y = y + z / 2 + x / 2 + b, x === 0 && v !== 0 && (y = y - o / 2 - b), v === 0 && (y = y - o / 2 - b), Math.abs(y) < 1 / 1e3 && (y = 0), i.roundLengths && (y = Math.floor(y)), I % i.slidesPerGroup === 0 && f.push(y), w.push(y)) : (i.roundLengths && (y = Math.floor(y)), (I - Math.min(t.params.slidesPerGroupSkip, I)) % t.params.slidesPerGroup === 0 && f.push(y), w.push(y), y = y + z + b), t.virtualSize += z + b, x = z, I += 1
       }
    }
    if (t.virtualSize = Math.max(t.virtualSize, o) + S, a && l && (i.effect === "slide" || i.effect === "coverflow") && (n.style.width = `${t.virtualSize+i.spaceBetween}px`), i.setWrapperSize && (n.style[e("width")] = `${t.virtualSize+i.spaceBetween}px`), O && t.grid.updateWrapperSize(z, f, e), !i.centeredSlides) {
       const v = [];
       for (let E = 0; E < f.length; E += 1) {
          let L = f[E];
          i.roundLengths && (L = Math.floor(L)), f[E] <= t.virtualSize - o && v.push(L)
       }
       f = v, Math.floor(t.virtualSize - o) - Math.floor(f[f.length - 1]) > 1 && f.push(t.virtualSize - o)
    }
    if (d && i.loop) {
       const v = m[0] + b;
       if (i.slidesPerGroup > 1) {
          const E = Math.ceil((t.virtual.slidesBefore + t.virtual.slidesAfter) / i.slidesPerGroup),
             L = v * i.slidesPerGroup;
          for (let D = 0; D < E; D += 1) f.push(f[f.length - 1] + L)
       }
       for (let E = 0; E < t.virtual.slidesBefore + t.virtual.slidesAfter; E += 1) i.slidesPerGroup === 1 && f.push(f[f.length - 1] + v), w.push(w[w.length - 1] + v), t.virtualSize += v
    }
    if (f.length === 0 && (f = [0]), i.spaceBetween !== 0) {
       const v = t.isHorizontal() && a ? "marginLeft" : e("marginRight");
       c.filter((E, L) => !i.cssMode || i.loop ? !0 : L !== c.length - 1).forEach(E => {
          E.style[v] = `${b}px`
       })
    }
    if (i.centeredSlides && i.centeredSlidesBounds) {
       let v = 0;
       m.forEach(L => {
          v += L + (i.spaceBetween ? i.spaceBetween : 0)
       }), v -= i.spaceBetween;
       const E = v - o;
       f = f.map(L => L < 0 ? -T : L > E ? E + S : L)
    }
    if (i.centerInsufficientSlides) {
       let v = 0;
       if (m.forEach(E => {
             v += E + (i.spaceBetween ? i.spaceBetween : 0)
          }), v -= i.spaceBetween, v < o) {
          const E = (o - v) / 2;
          f.forEach((L, D) => {
             f[D] = L - E
          }), w.forEach((L, D) => {
             w[D] = L + E
          })
       }
    }
    if (Object.assign(t, {
          slides: c,
          snapGrid: f,
          slidesGrid: w,
          slidesSizesGrid: m
       }), i.centeredSlides && i.cssMode && !i.centeredSlidesBounds) {
       Q(n, "--swiper-centered-offset-before", `${-f[0]}px`), Q(n, "--swiper-centered-offset-after", `${t.size/2-m[m.length-1]/2}px`);
       const v = -t.snapGrid[0],
          E = -t.slidesGrid[0];
       t.snapGrid = t.snapGrid.map(L => L + v), t.slidesGrid = t.slidesGrid.map(L => L + E)
    }
    if (p !== u && t.emit("slidesLengthChange"), f.length !== P && (t.params.watchOverflow && t.checkOverflow(), t.emit("snapGridLengthChange")), w.length !== g && t.emit("slidesGridLengthChange"), i.watchSlidesProgress && t.updateSlidesOffset(), !d && !i.cssMode && (i.effect === "slide" || i.effect === "fade")) {
       const v = `${i.containerModifierClass}backface-hidden`,
          E = t.el.classList.contains(v);
       p <= i.maxBackfaceHiddenSlides ? E || t.el.classList.add(v) : E && t.el.classList.remove(v)
    }
 }
 
 function Re(t) {
    const e = this,
       s = [],
       i = e.virtual && e.params.virtual.enabled;
    let n = 0,
       r;
    typeof t == "number" ? e.setTransition(t) : t === !0 && e.setTransition(e.params.speed);
    const o = a => i ? e.slides.filter(l => parseInt(l.getAttribute("data-swiper-slide-index"), 10) === a)[0] : e.slides[a];
    if (e.params.slidesPerView !== "auto" && e.params.slidesPerView > 1)
       if (e.params.centeredSlides)(e.visibleSlides || []).forEach(a => {
          s.push(a)
       });
       else
          for (r = 0; r < Math.ceil(e.params.slidesPerView); r += 1) {
             const a = e.activeIndex + r;
             if (a > e.slides.length && !i) break;
             s.push(o(a))
          } else s.push(o(e.activeIndex));
    for (r = 0; r < s.length; r += 1)
       if (typeof s[r] != "undefined") {
          const a = s[r].offsetHeight;
          n = a > n ? a : n
       }(n || n === 0) && (e.wrapperEl.style.height = `${n}px`)
 }
 
 function We() {
    const t = this,
       e = t.slides,
       s = t.isElement ? t.isHorizontal() ? t.wrapperEl.offsetLeft : t.wrapperEl.offsetTop : 0;
    for (let i = 0; i < e.length; i += 1) e[i].swiperSlideOffset = (t.isHorizontal() ? e[i].offsetLeft : e[i].offsetTop) - s
 }
 
 function je(t = this && this.translate || 0) {
    const e = this,
       s = e.params,
       {
          slides: i,
          rtlTranslate: n,
          snapGrid: r
       } = e;
    if (i.length === 0) return;
    typeof i[0].swiperSlideOffset == "undefined" && e.updateSlidesOffset();
    let o = -t;
    n && (o = t), i.forEach(a => {
       a.classList.remove(s.slideVisibleClass)
    }), e.visibleSlidesIndexes = [], e.visibleSlides = [];
    for (let a = 0; a < i.length; a += 1) {
       const l = i[a];
       let d = l.swiperSlideOffset;
       s.cssMode && s.centeredSlides && (d -= i[0].swiperSlideOffset);
       const u = (o + (s.centeredSlides ? e.minTranslate() : 0) - d) / (l.swiperSlideSize + s.spaceBetween),
          c = (o - r[0] + (s.centeredSlides ? e.minTranslate() : 0) - d) / (l.swiperSlideSize + s.spaceBetween),
          p = -(o - d),
          f = p + e.slidesSizesGrid[a];
       (p >= 0 && p < e.size - 1 || f > 1 && f <= e.size || p <= 0 && f >= e.size) && (e.visibleSlides.push(l), e.visibleSlidesIndexes.push(a), i[a].classList.add(s.slideVisibleClass)), l.progress = n ? -u : u, l.originalProgress = n ? -c : c
    }
 }
 
 function Xe(t) {
    const e = this;
    if (typeof t == "undefined") {
       const u = e.rtlTranslate ? -1 : 1;
       t = e && e.translate && e.translate * u || 0
    }
    const s = e.params,
       i = e.maxTranslate() - e.minTranslate();
    let {
       progress: n,
       isBeginning: r,
       isEnd: o,
       progressLoop: a
    } = e;
    const l = r,
       d = o;
    if (i === 0) n = 0, r = !0, o = !0;
    else {
       n = (t - e.minTranslate()) / i;
       const u = Math.abs(t - e.minTranslate()) < 1,
          c = Math.abs(t - e.maxTranslate()) < 1;
       r = u || n <= 0, o = c || n >= 1, u && (n = 0), c && (n = 1)
    }
    if (s.loop) {
       const u = j(e.slides.filter(T => T.getAttribute("data-swiper-slide-index") === "0")[0]),
          c = j(e.slides.filter(T => T.getAttribute("data-swiper-slide-index") * 1 === e.slides.length - 1)[0]),
          p = e.slidesGrid[u],
          f = e.slidesGrid[c],
          w = e.slidesGrid[e.slidesGrid.length - 1],
          m = Math.abs(t);
       m >= p ? a = (m - p) / w : a = (m + w - f) / w, a > 1 && (a -= 1)
    }
    Object.assign(e, {
       progress: n,
       progressLoop: a,
       isBeginning: r,
       isEnd: o
    }), (s.watchSlidesProgress || s.centeredSlides && s.autoHeight) && e.updateSlidesProgress(t), r && !l && e.emit("reachBeginning toEdge"), o && !d && e.emit("reachEnd toEdge"), (l && !r || d && !o) && e.emit("fromEdge"), e.emit("progress", n)
 }
 
 function Ye() {
    const t = this,
       {
          slides: e,
          params: s,
          slidesEl: i,
          activeIndex: n
       } = t,
       r = t.virtual && s.virtual.enabled,
       o = l => R(i, `.${s.slideClass}${l}, swiper-slide${l}`)[0];
    e.forEach(l => {
       l.classList.remove(s.slideActiveClass, s.slideNextClass, s.slidePrevClass)
    });
    let a;
    if (r)
       if (s.loop) {
          let l = n - t.virtual.slidesBefore;
          l < 0 && (l = t.virtual.slides.length + l), l >= t.virtual.slides.length && (l -= t.virtual.slides.length), a = o(`[data-swiper-slide-index="${l}"]`)
       } else a = o(`[data-swiper-slide-index="${n}"]`);
    else a = e[n];
    if (a) {
       a.classList.add(s.slideActiveClass);
       let l = Oe(a, `.${s.slideClass}, swiper-slide`)[0];
       s.loop && !l && (l = e[0]), l && l.classList.add(s.slideNextClass);
       let d = ze(a, `.${s.slideClass}, swiper-slide`)[0];
       s.loop && !d === 0 && (d = e[e.length - 1]), d && d.classList.add(s.slidePrevClass)
    }
    t.emitSlidesClasses()
 }
 
 function Ue(t) {
    const {
       slidesGrid: e,
       params: s
    } = t, i = t.rtlTranslate ? t.translate : -t.translate;
    let n;
    for (let r = 0; r < e.length; r += 1) typeof e[r + 1] != "undefined" ? i >= e[r] && i < e[r + 1] - (e[r + 1] - e[r]) / 2 ? n = r : i >= e[r] && i < e[r + 1] && (n = r + 1) : i >= e[r] && (n = r);
    return s.normalizeSlideIndex && (n < 0 || typeof n == "undefined") && (n = 0), n
 }
 
 function Ke(t) {
    const e = this,
       s = e.rtlTranslate ? e.translate : -e.translate,
       {
          snapGrid: i,
          params: n,
          activeIndex: r,
          realIndex: o,
          snapIndex: a
       } = e;
    let l = t,
       d;
    const u = p => {
       let f = p - e.virtual.slidesBefore;
       return f < 0 && (f = e.virtual.slides.length + f), f >= e.virtual.slides.length && (f -= e.virtual.slides.length), f
    };
    if (typeof l == "undefined" && (l = Ue(e)), i.indexOf(s) >= 0) d = i.indexOf(s);
    else {
       const p = Math.min(n.slidesPerGroupSkip, l);
       d = p + Math.floor((l - p) / n.slidesPerGroup)
    }
    if (d >= i.length && (d = i.length - 1), l === r) {
       d !== a && (e.snapIndex = d, e.emit("snapIndexChange")), e.params.loop && e.virtual && e.params.virtual.enabled && (e.realIndex = u(l));
       return
    }
    let c;
    e.virtual && n.virtual.enabled && n.loop ? c = u(l) : e.slides[l] ? c = parseInt(e.slides[l].getAttribute("data-swiper-slide-index") || l, 10) : c = l, Object.assign(e, {
       snapIndex: d,
       realIndex: c,
       previousIndex: r,
       activeIndex: l
    }), e.emit("activeIndexChange"), e.emit("snapIndexChange"), o !== c && e.emit("realIndexChange"), (e.initialized || e.params.runCallbacksOnInit) && e.emit("slideChange")
 }
 
 function Ze(t) {
    const e = this,
       s = e.params,
       i = t.closest(`.${s.slideClass}, swiper-slide`);
    let n = !1,
       r;
    if (i) {
       for (let o = 0; o < e.slides.length; o += 1)
          if (e.slides[o] === i) {
             n = !0, r = o;
             break
          }
    }
    if (i && n) e.clickedSlide = i, e.virtual && e.params.virtual.enabled ? e.clickedIndex = parseInt(i.getAttribute("data-swiper-slide-index"), 10) : e.clickedIndex = r;
    else {
       e.clickedSlide = void 0, e.clickedIndex = void 0;
       return
    }
    s.slideToClickedSlide && e.clickedIndex !== void 0 && e.clickedIndex !== e.activeIndex && e.slideToClickedSlide()
 }
 var Je = {
    updateSize: qe,
    updateSlides: _e,
    updateAutoHeight: Re,
    updateSlidesOffset: We,
    updateSlidesProgress: je,
    updateProgress: Xe,
    updateSlidesClasses: Ye,
    updateActiveIndex: Ke,
    updateClickedSlide: Ze
 };
 
 function Qe(t = this.isHorizontal() ? "x" : "y") {
    const e = this,
       {
          params: s,
          rtlTranslate: i,
          translate: n,
          wrapperEl: r
       } = e;
    if (s.virtualTranslate) return i ? -n : n;
    if (s.cssMode) return n;
    let o = Ae(r, t);
    return i && (o = -o), o || 0
 }
 
 function et(t, e) {
    const s = this,
       {
          rtlTranslate: i,
          params: n,
          wrapperEl: r,
          progress: o
       } = s;
    let a = 0,
       l = 0;
    const d = 0;
    s.isHorizontal() ? a = i ? -t : t : l = t, n.roundLengths && (a = Math.floor(a), l = Math.floor(l)), n.cssMode ? r[s.isHorizontal() ? "scrollLeft" : "scrollTop"] = s.isHorizontal() ? -a : -l : n.virtualTranslate || (r.style.transform = `translate3d(${a}px, ${l}px, ${d}px)`), s.previousTranslate = s.translate, s.translate = s.isHorizontal() ? a : l;
    let u;
    const c = s.maxTranslate() - s.minTranslate();
    c === 0 ? u = 0 : u = (t - s.minTranslate()) / c, u !== o && s.updateProgress(t), s.emit("setTranslate", s.translate, e)
 }
 
 function tt() {
    return -this.snapGrid[0]
 }
 
 function st() {
    return -this.snapGrid[this.snapGrid.length - 1]
 }
 
 function it(t = 0, e = this.params.speed, s = !0, i = !0, n) {
    const r = this,
       {
          params: o,
          wrapperEl: a
       } = r;
    if (r.animating && o.preventInteractionOnTransition) return !1;
    const l = r.minTranslate(),
       d = r.maxTranslate();
    let u;
    if (i && t > l ? u = l : i && t < d ? u = d : u = t, r.updateProgress(u), o.cssMode) {
       const c = r.isHorizontal();
       if (e === 0) a[c ? "scrollLeft" : "scrollTop"] = -u;
       else {
          if (!r.support.smoothScroll) return be({
             swiper: r,
             targetPosition: -u,
             side: c ? "left" : "top"
          }), !0;
          a.scrollTo({
             [c ? "left" : "top"]: -u,
             behavior: "smooth"
          })
       }
       return !0
    }
    return e === 0 ? (r.setTransition(0), r.setTranslate(u), s && (r.emit("beforeTransitionStart", e, n), r.emit("transitionEnd"))) : (r.setTransition(e), r.setTranslate(u), s && (r.emit("beforeTransitionStart", e, n), r.emit("transitionStart")), r.animating || (r.animating = !0, r.onTranslateToWrapperTransitionEnd || (r.onTranslateToWrapperTransitionEnd = function (p) {
       !r || r.destroyed || p.target === this && (r.wrapperEl.removeEventListener("transitionend", r.onTranslateToWrapperTransitionEnd), r.onTranslateToWrapperTransitionEnd = null, delete r.onTranslateToWrapperTransitionEnd, s && r.emit("transitionEnd"))
    }), r.wrapperEl.addEventListener("transitionend", r.onTranslateToWrapperTransitionEnd))), !0
 }
 var rt = {
    getTranslate: Qe,
    setTranslate: et,
    minTranslate: tt,
    maxTranslate: st,
    translateTo: it
 };
 
 function nt(t, e) {
    const s = this;
    s.params.cssMode || (s.wrapperEl.style.transitionDuration = `${t}ms`), s.emit("setTransition", t, e)
 }
 
 function xe({
    swiper: t,
    runCallbacks: e,
    direction: s,
    step: i
 }) {
    const {
       activeIndex: n,
       previousIndex: r
    } = t;
    let o = s;
    if (o || (n > r ? o = "next" : n < r ? o = "prev" : o = "reset"), t.emit(`transition${i}`), e && n !== r) {
       if (o === "reset") {
          t.emit(`slideResetTransition${i}`);
          return
       }
       t.emit(`slideChangeTransition${i}`), o === "next" ? t.emit(`slideNextTransition${i}`) : t.emit(`slidePrevTransition${i}`)
    }
 }
 
 function at(t = !0, e) {
    const s = this,
       {
          params: i
       } = s;
    i.cssMode || (i.autoHeight && s.updateAutoHeight(), xe({
       swiper: s,
       runCallbacks: t,
       direction: e,
       step: "Start"
    }))
 }
 
 function lt(t = !0, e) {
    const s = this,
       {
          params: i
       } = s;
    s.animating = !1, !i.cssMode && (s.setTransition(0), xe({
       swiper: s,
       runCallbacks: t,
       direction: e,
       step: "End"
    }))
 }
 var ot = {
    setTransition: nt,
    transitionStart: at,
    transitionEnd: lt
 };
 
 function dt(t = 0, e = this.params.speed, s = !0, i, n) {
    typeof t == "string" && (t = parseInt(t, 10));
    const r = this;
    let o = t;
    o < 0 && (o = 0);
    const {
       params: a,
       snapGrid: l,
       slidesGrid: d,
       previousIndex: u,
       activeIndex: c,
       rtlTranslate: p,
       wrapperEl: f,
       enabled: w
    } = r;
    if (r.animating && a.preventInteractionOnTransition || !w && !i && !n) return !1;
    const m = Math.min(r.params.slidesPerGroupSkip, o);
    let T = m + Math.floor((o - m) / r.params.slidesPerGroup);
    T >= l.length && (T = l.length - 1);
    const S = -l[T];
    if (a.normalizeSlideIndex)
       for (let g = 0; g < d.length; g += 1) {
          const b = -Math.floor(S * 100),
             y = Math.floor(d[g] * 100),
             x = Math.floor(d[g + 1] * 100);
          typeof d[g + 1] != "undefined" ? b >= y && b < x - (x - y) / 2 ? o = g : b >= y && b < x && (o = g + 1) : b >= y && (o = g)
       }
    if (r.initialized && o !== c && (!r.allowSlideNext && S < r.translate && S < r.minTranslate() || !r.allowSlidePrev && S > r.translate && S > r.maxTranslate() && (c || 0) !== o)) return !1;
    o !== (u || 0) && s && r.emit("beforeSlideChangeStart"), r.updateProgress(S);
    let P;
    if (o > c ? P = "next" : o < c ? P = "prev" : P = "reset", p && -S === r.translate || !p && S === r.translate) return r.updateActiveIndex(o), a.autoHeight && r.updateAutoHeight(), r.updateSlidesClasses(), a.effect !== "slide" && r.setTranslate(S), P !== "reset" && (r.transitionStart(s, P), r.transitionEnd(s, P)), !1;
    if (a.cssMode) {
       const g = r.isHorizontal(),
          b = p ? S : -S;
       if (e === 0) {
          const y = r.virtual && r.params.virtual.enabled;
          y && (r.wrapperEl.style.scrollSnapType = "none", r._immediateVirtual = !0), y && !r._cssModeVirtualInitialSet && r.params.initialSlide > 0 ? (r._cssModeVirtualInitialSet = !0, requestAnimationFrame(() => {
             f[g ? "scrollLeft" : "scrollTop"] = b
          })) : f[g ? "scrollLeft" : "scrollTop"] = b, y && requestAnimationFrame(() => {
             r.wrapperEl.style.scrollSnapType = "", r._immediateVirtual = !1
          })
       } else {
          if (!r.support.smoothScroll) return be({
             swiper: r,
             targetPosition: b,
             side: g ? "left" : "top"
          }), !0;
          f.scrollTo({
             [g ? "left" : "top"]: b,
             behavior: "smooth"
          })
       }
       return !0
    }
    return r.setTransition(e), r.setTranslate(S), r.updateActiveIndex(o), r.updateSlidesClasses(), r.emit("beforeTransitionStart", e, i), r.transitionStart(s, P), e === 0 ? r.transitionEnd(s, P) : r.animating || (r.animating = !0, r.onSlideToWrapperTransitionEnd || (r.onSlideToWrapperTransitionEnd = function (b) {
       !r || r.destroyed || b.target === this && (r.wrapperEl.removeEventListener("transitionend", r.onSlideToWrapperTransitionEnd), r.onSlideToWrapperTransitionEnd = null, delete r.onSlideToWrapperTransitionEnd, r.transitionEnd(s, P))
    }), r.wrapperEl.addEventListener("transitionend", r.onSlideToWrapperTransitionEnd)), !0
 }
 
 function ct(t = 0, e = this.params.speed, s = !0, i) {
    typeof t == "string" && (t = parseInt(t, 10));
    const n = this;
    let r = t;
    return n.params.loop && (n.virtual && n.params.virtual.enabled ? r = r + n.virtual.slidesBefore : r = j(n.slides.filter(o => o.getAttribute("data-swiper-slide-index") * 1 === r)[0])), n.slideTo(r, e, s, i)
 }
 
 function ft(t = this.params.speed, e = !0, s) {
    const i = this,
       {
          enabled: n,
          params: r,
          animating: o
       } = i;
    if (!n) return i;
    let a = r.slidesPerGroup;
    r.slidesPerView === "auto" && r.slidesPerGroup === 1 && r.slidesPerGroupAuto && (a = Math.max(i.slidesPerViewDynamic("current", !0), 1));
    const l = i.activeIndex < r.slidesPerGroupSkip ? 1 : a,
       d = i.virtual && r.virtual.enabled;
    if (r.loop) {
       if (o && !d && r.loopPreventsSliding) return !1;
       i.loopFix({
          direction: "next"
       }), i._clientLeft = i.wrapperEl.clientLeft
    }
    return r.rewind && i.isEnd ? i.slideTo(0, t, e, s) : i.slideTo(i.activeIndex + l, t, e, s)
 }
 
 function ut(t = this.params.speed, e = !0, s) {
    const i = this,
       {
          params: n,
          snapGrid: r,
          slidesGrid: o,
          rtlTranslate: a,
          enabled: l,
          animating: d
       } = i;
    if (!l) return i;
    const u = i.virtual && n.virtual.enabled;
    if (n.loop) {
       if (d && !u && n.loopPreventsSliding) return !1;
       i.loopFix({
          direction: "prev"
       }), i._clientLeft = i.wrapperEl.clientLeft
    }
    const c = a ? i.translate : -i.translate;
 
    function p(S) {
       return S < 0 ? -Math.floor(Math.abs(S)) : Math.floor(S)
    }
    const f = p(c),
       w = r.map(S => p(S));
    let m = r[w.indexOf(f) - 1];
    if (typeof m == "undefined" && n.cssMode) {
       let S;
       r.forEach((P, g) => {
          f >= P && (S = g)
       }), typeof S != "undefined" && (m = r[S > 0 ? S - 1 : S])
    }
    let T = 0;
    if (typeof m != "undefined" && (T = o.indexOf(m), T < 0 && (T = i.activeIndex - 1), n.slidesPerView === "auto" && n.slidesPerGroup === 1 && n.slidesPerGroupAuto && (T = T - i.slidesPerViewDynamic("previous", !0) + 1, T = Math.max(T, 0))), n.rewind && i.isBeginning) {
       const S = i.params.virtual && i.params.virtual.enabled && i.virtual ? i.virtual.slides.length - 1 : i.slides.length - 1;
       return i.slideTo(S, t, e, s)
    }
    return i.slideTo(T, t, e, s)
 }
 
 function pt(t = this.params.speed, e = !0, s) {
    const i = this;
    return i.slideTo(i.activeIndex, t, e, s)
 }
 
 function ht(t = this.params.speed, e = !0, s, i = .5) {
    const n = this;
    let r = n.activeIndex;
    const o = Math.min(n.params.slidesPerGroupSkip, r),
       a = o + Math.floor((r - o) / n.params.slidesPerGroup),
       l = n.rtlTranslate ? n.translate : -n.translate;
    if (l >= n.snapGrid[a]) {
       const d = n.snapGrid[a],
          u = n.snapGrid[a + 1];
       l - d > (u - d) * i && (r += n.params.slidesPerGroup)
    } else {
       const d = n.snapGrid[a - 1],
          u = n.snapGrid[a];
       l - d <= (u - d) * i && (r -= n.params.slidesPerGroup)
    }
    return r = Math.max(r, 0), r = Math.min(r, n.slidesGrid.length - 1), n.slideTo(r, t, e, s)
 }
 
 function mt() {
    const t = this,
       {
          params: e,
          slidesEl: s
       } = t,
       i = e.slidesPerView === "auto" ? t.slidesPerViewDynamic() : e.slidesPerView;
    let n = t.clickedIndex,
       r;
    const o = t.isElement ? "swiper-slide" : `.${e.slideClass}`;
    if (e.loop) {
       if (t.animating) return;
       r = parseInt(t.clickedSlide.getAttribute("data-swiper-slide-index"), 10), e.centeredSlides ? n < t.loopedSlides - i / 2 || n > t.slides.length - t.loopedSlides + i / 2 ? (t.loopFix(), n = j(R(s, `${o}[data-swiper-slide-index="${r}"]`)[0]), de(() => {
          t.slideTo(n)
       })) : t.slideTo(n) : n > t.slides.length - i ? (t.loopFix(), n = j(R(s, `${o}[data-swiper-slide-index="${r}"]`)[0]), de(() => {
          t.slideTo(n)
       })) : t.slideTo(n)
    } else t.slideTo(n)
 }
 var gt = {
    slideTo: dt,
    slideToLoop: ct,
    slideNext: ft,
    slidePrev: ut,
    slideReset: pt,
    slideToClosest: ht,
    slideToClickedSlide: mt
 };
 
 function vt(t) {
    const e = this,
       {
          params: s,
          slidesEl: i
       } = e;
    if (!s.loop || e.virtual && e.params.virtual.enabled) return;
    R(i, `.${s.slideClass}, swiper-slide`).forEach((r, o) => {
       r.setAttribute("data-swiper-slide-index", o)
    }), e.loopFix({
       slideRealIndex: t,
       direction: s.centeredSlides ? void 0 : "next"
    })
 }
 
 function wt({
    slideRealIndex: t,
    slideTo: e = !0,
    direction: s,
    setTranslate: i,
    activeSlideIndex: n,
    byController: r,
    byMousewheel: o
 } = {}) {
    const a = this;
    if (!a.params.loop) return;
    a.emit("beforeLoopFix");
    const {
       slides: l,
       allowSlidePrev: d,
       allowSlideNext: u,
       slidesEl: c,
       params: p
    } = a;
    if (a.allowSlidePrev = !0, a.allowSlideNext = !0, a.virtual && p.virtual.enabled) {
       e && (!p.centeredSlides && a.snapIndex === 0 ? a.slideTo(a.virtual.slides.length, 0, !1, !0) : p.centeredSlides && a.snapIndex < p.slidesPerView ? a.slideTo(a.virtual.slides.length + a.snapIndex, 0, !1, !0) : a.snapIndex === a.snapGrid.length - 1 && a.slideTo(a.virtual.slidesBefore, 0, !1, !0)), a.allowSlidePrev = d, a.allowSlideNext = u, a.emit("loopFix");
       return
    }
    const f = p.slidesPerView === "auto" ? a.slidesPerViewDynamic() : Math.ceil(parseFloat(p.slidesPerView, 10));
    let w = p.loopedSlides || f;
    w % p.slidesPerGroup !== 0 && (w += p.slidesPerGroup - w % p.slidesPerGroup), a.loopedSlides = w;
    const m = [],
       T = [];
    let S = a.activeIndex;
    typeof n == "undefined" ? n = j(a.slides.filter(x => x.classList.contains("swiper-slide-active"))[0]) : S = n;
    const P = s === "next" || !s,
       g = s === "prev" || !s;
    let b = 0,
       y = 0;
    if (n < w) {
       b = w - n;
       for (let x = 0; x < w - n; x += 1) {
          const I = x - Math.floor(x / l.length) * l.length;
          m.push(l.length - I - 1)
       }
    } else if (n > a.slides.length - w * 2) {
       y = n - (a.slides.length - w * 2);
       for (let x = 0; x < y; x += 1) {
          const I = x - Math.floor(x / l.length) * l.length;
          T.push(I)
       }
    }
    if (g && m.forEach(x => {
          c.prepend(a.slides[x])
       }), P && T.forEach(x => {
          c.append(a.slides[x])
       }), a.recalcSlides(), p.watchSlidesProgress && a.updateSlidesOffset(), e) {
       if (m.length > 0 && g)
          if (typeof t == "undefined") {
             const x = a.slidesGrid[S],
                O = a.slidesGrid[S + b] - x;
             o ? a.setTranslate(a.translate - O) : (a.slideTo(S + b, 0, !1, !0), i && (a.touches[a.isHorizontal() ? "startX" : "startY"] += O))
          } else i && a.slideToLoop(t, 0, !1, !0);
       else if (T.length > 0 && P)
          if (typeof t == "undefined") {
             const x = a.slidesGrid[S],
                O = a.slidesGrid[S - y] - x;
             o ? a.setTranslate(a.translate - O) : (a.slideTo(S - y, 0, !1, !0), i && (a.touches[a.isHorizontal() ? "startX" : "startY"] += O))
          } else a.slideToLoop(t, 0, !1, !0)
    }
    if (a.allowSlidePrev = d, a.allowSlideNext = u, a.controller && a.controller.control && !r) {
       const x = {
          slideRealIndex: t,
          slideTo: !1,
          direction: s,
          setTranslate: i,
          activeSlideIndex: n,
          byController: !0
       };
       Array.isArray(a.controller.control) ? a.controller.control.forEach(I => {
          I.params.loop && I.loopFix(x)
       }) : a.controller.control instanceof a.constructor && a.controller.control.params.loop && a.controller.control.loopFix(x)
    }
    a.emit("loopFix")
 }
 
 function St() {
    const t = this,
       {
          slides: e,
          params: s,
          slidesEl: i
       } = t;
    if (!s.loop || t.virtual && t.params.virtual.enabled) return;
    t.recalcSlides();
    const n = [];
    e.forEach(r => {
       const o = typeof r.swiperSlideIndex == "undefined" ? r.getAttribute("data-swiper-slide-index") * 1 : r.swiperSlideIndex;
       n[o] = r
    }), e.forEach(r => {
       r.removeAttribute("data-swiper-slide-index")
    }), n.forEach(r => {
       i.append(r)
    }), t.recalcSlides(), t.slideTo(t.realIndex, 0)
 }
 var Tt = {
    loopCreate: vt,
    loopFix: wt,
    loopDestroy: St
 };
 
 function bt(t) {
    const e = this;
    if (!e.params.simulateTouch || e.params.watchOverflow && e.isLocked || e.params.cssMode) return;
    const s = e.params.touchEventsTarget === "container" ? e.el : e.wrapperEl;
    s.style.cursor = "move", s.style.cursor = t ? "grabbing" : "grab"
 }
 
 function yt() {
    const t = this;
    t.params.watchOverflow && t.isLocked || t.params.cssMode || (t[t.params.touchEventsTarget === "container" ? "el" : "wrapperEl"].style.cursor = "")
 }
 var xt = {
    setGrabCursor: bt,
    unsetGrabCursor: yt
 };
 
 function Et(t, e = this) {
    function s(i) {
       if (!i || i === W() || i === B()) return null;
       i.assignedSlot && (i = i.assignedSlot);
       const n = i.closest(t);
       return !n && !i.getRootNode ? null : n || s(i.getRootNode().host)
    }
    return s(e)
 }
 
 function Mt(t) {
    const e = this,
       s = W(),
       i = B(),
       n = e.touchEventsData;
    n.evCache.push(t);
    const {
       params: r,
       touches: o,
       enabled: a
    } = e;
    if (!a || !r.simulateTouch && t.pointerType === "mouse" || e.animating && r.preventInteractionOnTransition) return;
    !e.animating && r.cssMode && r.loop && e.loopFix();
    let l = t;
    l.originalEvent && (l = l.originalEvent);
    let d = l.target;
    if (r.touchEventsTarget === "wrapper" && !e.wrapperEl.contains(d) || "which" in l && l.which === 3 || "button" in l && l.button > 0 || n.isTouched && n.isMoved) return;
    const u = !!r.noSwipingClass && r.noSwipingClass !== "",
       c = t.composedPath ? t.composedPath() : t.path;
    u && l.target && l.target.shadowRoot && c && (d = c[0]);
    const p = r.noSwipingSelector ? r.noSwipingSelector : `.${r.noSwipingClass}`,
       f = !!(l.target && l.target.shadowRoot);
    if (r.noSwiping && (f ? Et(p, d) : d.closest(p))) {
       e.allowClick = !0;
       return
    }
    if (r.swipeHandler && !d.closest(r.swipeHandler)) return;
    o.currentX = l.pageX, o.currentY = l.pageY;
    const w = o.currentX,
       m = o.currentY,
       T = r.edgeSwipeDetection || r.iOSEdgeSwipeDetection,
       S = r.edgeSwipeThreshold || r.iOSEdgeSwipeThreshold;
    if (T && (w <= S || w >= i.innerWidth - S))
       if (T === "prevent") t.preventDefault();
       else return;
    Object.assign(n, {
       isTouched: !0,
       isMoved: !1,
       allowTouchCallbacks: !0,
       isScrolling: void 0,
       startMoving: void 0
    }), o.startX = w, o.startY = m, n.touchStartTime = U(), e.allowClick = !0, e.updateSize(), e.swipeDirection = void 0, r.threshold > 0 && (n.allowThresholdMove = !1);
    let P = !0;
    d.matches(n.focusableElements) && (P = !1, d.nodeName === "SELECT" && (n.isTouched = !1)), s.activeElement && s.activeElement.matches(n.focusableElements) && s.activeElement !== d && s.activeElement.blur();
    const g = P && e.allowTouchMove && r.touchStartPreventDefault;
    (r.touchStartForcePreventDefault || g) && !d.isContentEditable && l.preventDefault(), e.params.freeMode && e.params.freeMode.enabled && e.freeMode && e.animating && !r.cssMode && e.freeMode.onTouchStart(), e.emit("touchStart", l)
 }
 
 function Pt(t) {
    const e = W(),
       s = this,
       i = s.touchEventsData,
       {
          params: n,
          touches: r,
          rtlTranslate: o,
          enabled: a
       } = s;
    if (!a || !n.simulateTouch && t.pointerType === "mouse") return;
    let l = t;
    if (l.originalEvent && (l = l.originalEvent), !i.isTouched) {
       i.startMoving && i.isScrolling && s.emit("touchMoveOpposite", l);
       return
    }
    const d = i.evCache.findIndex(x => x.pointerId === l.pointerId);
    d >= 0 && (i.evCache[d] = l);
    const u = i.evCache.length > 1 ? i.evCache[0] : l,
       c = u.pageX,
       p = u.pageY;
    if (l.preventedByNestedSwiper) {
       r.startX = c, r.startY = p;
       return
    }
    if (!s.allowTouchMove) {
       l.target.matches(i.focusableElements) || (s.allowClick = !1), i.isTouched && (Object.assign(r, {
          startX: c,
          startY: p,
          prevX: s.touches.currentX,
          prevY: s.touches.currentY,
          currentX: c,
          currentY: p
       }), i.touchStartTime = U());
       return
    }
    if (n.touchReleaseOnEdges && !n.loop) {
       if (s.isVertical()) {
          if (p < r.startY && s.translate <= s.maxTranslate() || p > r.startY && s.translate >= s.minTranslate()) {
             i.isTouched = !1, i.isMoved = !1;
             return
          }
       } else if (c < r.startX && s.translate <= s.maxTranslate() || c > r.startX && s.translate >= s.minTranslate()) return
    }
    if (e.activeElement && l.target === e.activeElement && l.target.matches(i.focusableElements)) {
       i.isMoved = !0, s.allowClick = !1;
       return
    }
    if (i.allowTouchCallbacks && s.emit("touchMove", l), l.targetTouches && l.targetTouches.length > 1) return;
    r.currentX = c, r.currentY = p;
    const f = r.currentX - r.startX,
       w = r.currentY - r.startY;
    if (s.params.threshold && Math.sqrt(f ** 2 + w ** 2) < s.params.threshold) return;
    if (typeof i.isScrolling == "undefined") {
       let x;
       s.isHorizontal() && r.currentY === r.startY || s.isVertical() && r.currentX === r.startX ? i.isScrolling = !1 : f * f + w * w >= 25 && (x = Math.atan2(Math.abs(w), Math.abs(f)) * 180 / Math.PI, i.isScrolling = s.isHorizontal() ? x > n.touchAngle : 90 - x > n.touchAngle)
    }
    if (i.isScrolling && s.emit("touchMoveOpposite", l), typeof i.startMoving == "undefined" && (r.currentX !== r.startX || r.currentY !== r.startY) && (i.startMoving = !0), i.isScrolling || s.zoom && s.params.zoom && s.params.zoom.enabled && i.evCache.length > 1) {
       i.isTouched = !1;
       return
    }
    if (!i.startMoving) return;
    s.allowClick = !1, !n.cssMode && l.cancelable && l.preventDefault(), n.touchMoveStopPropagation && !n.nested && l.stopPropagation();
    let m = s.isHorizontal() ? f : w,
       T = s.isHorizontal() ? r.currentX - r.previousX : r.currentY - r.previousY;
    n.oneWayMovement && (m = Math.abs(m) * (o ? 1 : -1), T = Math.abs(T) * (o ? 1 : -1)), r.diff = m, m *= n.touchRatio, o && (m = -m, T = -T);
    const S = s.touchesDirection;
    s.swipeDirection = m > 0 ? "prev" : "next", s.touchesDirection = T > 0 ? "prev" : "next";
    const P = s.params.loop && !n.cssMode;
    if (!i.isMoved) {
       if (P && s.loopFix({
             direction: s.swipeDirection
          }), i.startTranslate = s.getTranslate(), s.setTransition(0), s.animating) {
          const x = new window.CustomEvent("transitionend", {
             bubbles: !0,
             cancelable: !0
          });
          s.wrapperEl.dispatchEvent(x)
       }
       i.allowMomentumBounce = !1, n.grabCursor && (s.allowSlideNext === !0 || s.allowSlidePrev === !0) && s.setGrabCursor(!0), s.emit("sliderFirstMove", l)
    }
    let g;
    i.isMoved && S !== s.touchesDirection && P && Math.abs(m) >= 1 && (s.loopFix({
       direction: s.swipeDirection,
       setTranslate: !0
    }), g = !0), s.emit("sliderMove", l), i.isMoved = !0, i.currentTranslate = m + i.startTranslate;
    let b = !0,
       y = n.resistanceRatio;
    if (n.touchReleaseOnEdges && (y = 0), m > 0 ? (P && !g && i.currentTranslate > (n.centeredSlides ? s.minTranslate() - s.size / 2 : s.minTranslate()) && s.loopFix({
          direction: "prev",
          setTranslate: !0,
          activeSlideIndex: 0
       }), i.currentTranslate > s.minTranslate() && (b = !1, n.resistance && (i.currentTranslate = s.minTranslate() - 1 + (-s.minTranslate() + i.startTranslate + m) ** y))) : m < 0 && (P && !g && i.currentTranslate < (n.centeredSlides ? s.maxTranslate() + s.size / 2 : s.maxTranslate()) && s.loopFix({
          direction: "next",
          setTranslate: !0,
          activeSlideIndex: s.slides.length - (n.slidesPerView === "auto" ? s.slidesPerViewDynamic() : Math.ceil(parseFloat(n.slidesPerView, 10)))
       }), i.currentTranslate < s.maxTranslate() && (b = !1, n.resistance && (i.currentTranslate = s.maxTranslate() + 1 - (s.maxTranslate() - i.startTranslate - m) ** y))), b && (l.preventedByNestedSwiper = !0), !s.allowSlideNext && s.swipeDirection === "next" && i.currentTranslate < i.startTranslate && (i.currentTranslate = i.startTranslate), !s.allowSlidePrev && s.swipeDirection === "prev" && i.currentTranslate > i.startTranslate && (i.currentTranslate = i.startTranslate), !s.allowSlidePrev && !s.allowSlideNext && (i.currentTranslate = i.startTranslate), n.threshold > 0)
       if (Math.abs(m) > n.threshold || i.allowThresholdMove) {
          if (!i.allowThresholdMove) {
             i.allowThresholdMove = !0, r.startX = r.currentX, r.startY = r.currentY, i.currentTranslate = i.startTranslate, r.diff = s.isHorizontal() ? r.currentX - r.startX : r.currentY - r.startY;
             return
          }
       } else {
          i.currentTranslate = i.startTranslate;
          return
       }! n.followFinger || n.cssMode || ((n.freeMode && n.freeMode.enabled && s.freeMode || n.watchSlidesProgress) && (s.updateActiveIndex(), s.updateSlidesClasses()), s.params.freeMode && n.freeMode.enabled && s.freeMode && s.freeMode.onTouchMove(), s.updateProgress(i.currentTranslate), s.setTranslate(i.currentTranslate))
 }
 
 function Ct(t) {
    const e = this,
       s = e.touchEventsData,
       i = s.evCache.findIndex(g => g.pointerId === t.pointerId);
    if (i >= 0 && s.evCache.splice(i, 1), ["pointercancel", "pointerout", "pointerleave"].includes(t.type)) return;
    const {
       params: n,
       touches: r,
       rtlTranslate: o,
       slidesGrid: a,
       enabled: l
    } = e;
    if (!l || !n.simulateTouch && t.pointerType === "mouse") return;
    let d = t;
    if (d.originalEvent && (d = d.originalEvent), s.allowTouchCallbacks && e.emit("touchEnd", d), s.allowTouchCallbacks = !1, !s.isTouched) {
       s.isMoved && n.grabCursor && e.setGrabCursor(!1), s.isMoved = !1, s.startMoving = !1;
       return
    }
    n.grabCursor && s.isMoved && s.isTouched && (e.allowSlideNext === !0 || e.allowSlidePrev === !0) && e.setGrabCursor(!1);
    const u = U(),
       c = u - s.touchStartTime;
    if (e.allowClick) {
       const g = d.path || d.composedPath && d.composedPath();
       e.updateClickedSlide(g && g[0] || d.target), e.emit("tap click", d), c < 300 && u - s.lastClickTime < 300 && e.emit("doubleTap doubleClick", d)
    }
    if (s.lastClickTime = U(), de(() => {
          e.destroyed || (e.allowClick = !0)
       }), !s.isTouched || !s.isMoved || !e.swipeDirection || r.diff === 0 || s.currentTranslate === s.startTranslate) {
       s.isTouched = !1, s.isMoved = !1, s.startMoving = !1;
       return
    }
    s.isTouched = !1, s.isMoved = !1, s.startMoving = !1;
    let p;
    if (n.followFinger ? p = o ? e.translate : -e.translate : p = -s.currentTranslate, n.cssMode) return;
    if (e.params.freeMode && n.freeMode.enabled) {
       e.freeMode.onTouchEnd({
          currentPos: p
       });
       return
    }
    let f = 0,
       w = e.slidesSizesGrid[0];
    for (let g = 0; g < a.length; g += g < n.slidesPerGroupSkip ? 1 : n.slidesPerGroup) {
       const b = g < n.slidesPerGroupSkip - 1 ? 1 : n.slidesPerGroup;
       typeof a[g + b] != "undefined" ? p >= a[g] && p < a[g + b] && (f = g, w = a[g + b] - a[g]) : p >= a[g] && (f = g, w = a[a.length - 1] - a[a.length - 2])
    }
    let m = null,
       T = null;
    n.rewind && (e.isBeginning ? T = e.params.virtual && e.params.virtual.enabled && e.virtual ? e.virtual.slides.length - 1 : e.slides.length - 1 : e.isEnd && (m = 0));
    const S = (p - a[f]) / w,
       P = f < n.slidesPerGroupSkip - 1 ? 1 : n.slidesPerGroup;
    if (c > n.longSwipesMs) {
       if (!n.longSwipes) {
          e.slideTo(e.activeIndex);
          return
       }
       e.swipeDirection === "next" && (S >= n.longSwipesRatio ? e.slideTo(n.rewind && e.isEnd ? m : f + P) : e.slideTo(f)), e.swipeDirection === "prev" && (S > 1 - n.longSwipesRatio ? e.slideTo(f + P) : T !== null && S < 0 && Math.abs(S) > n.longSwipesRatio ? e.slideTo(T) : e.slideTo(f))
    } else {
       if (!n.shortSwipes) {
          e.slideTo(e.activeIndex);
          return
       }
       e.navigation && (d.target === e.navigation.nextEl || d.target === e.navigation.prevEl) ? d.target === e.navigation.nextEl ? e.slideTo(f + P) : e.slideTo(f) : (e.swipeDirection === "next" && e.slideTo(m !== null ? m : f + P), e.swipeDirection === "prev" && e.slideTo(T !== null ? T : f))
    }
 }
 let me;
 
 function ge() {
    const t = this,
       {
          params: e,
          el: s
       } = t;
    if (s && s.offsetWidth === 0) return;
    e.breakpoints && t.setBreakpoint();
    const {
       allowSlideNext: i,
       allowSlidePrev: n,
       snapGrid: r
    } = t, o = t.virtual && t.params.virtual.enabled;
    t.allowSlideNext = !0, t.allowSlidePrev = !0, t.updateSize(), t.updateSlides(), t.updateSlidesClasses();
    const a = o && e.loop;
    (e.slidesPerView === "auto" || e.slidesPerView > 1) && t.isEnd && !t.isBeginning && !t.params.centeredSlides && !a ? t.slideTo(t.slides.length - 1, 0, !1, !0) : t.params.loop && !o ? t.slideToLoop(t.realIndex, 0, !1, !0) : t.slideTo(t.activeIndex, 0, !1, !0), t.autoplay && t.autoplay.running && t.autoplay.paused && (clearTimeout(me), me = setTimeout(() => {
       t.autoplay.resume()
    }, 500)), t.allowSlidePrev = n, t.allowSlideNext = i, t.params.watchOverflow && r !== t.snapGrid && t.checkOverflow()
 }
 
 function Lt(t) {
    const e = this;
    !e.enabled || e.allowClick || (e.params.preventClicks && t.preventDefault(), e.params.preventClicksPropagation && e.animating && (t.stopPropagation(), t.stopImmediatePropagation()))
 }
 
 function At() {
    const t = this,
       {
          wrapperEl: e,
          rtlTranslate: s,
          enabled: i
       } = t;
    if (!i) return;
    t.previousTranslate = t.translate, t.isHorizontal() ? t.translate = -e.scrollLeft : t.translate = -e.scrollTop, t.translate === 0 && (t.translate = 0), t.updateActiveIndex(), t.updateSlidesClasses();
    let n;
    const r = t.maxTranslate() - t.minTranslate();
    r === 0 ? n = 0 : n = (t.translate - t.minTranslate()) / r, n !== t.progress && t.updateProgress(s ? -t.translate : t.translate), t.emit("setTranslate", t.translate, !1)
 }
 const ee = (t, e) => {
    if (!t || t.destroyed || !t.params) return;
    const s = () => t.isElement ? "swiper-slide" : `.${t.params.slideClass}`,
       i = e.closest(s());
    if (i) {
       const n = i.querySelector(`.${t.params.lazyPreloaderClass}`);
       n && n.remove()
    }
 };
 
 function It(t) {
    const e = this;
    ee(e, t.target), e.update()
 }
 let ve = !1;
 
 function zt() {}
 const Ee = (t, e) => {
    const s = W(),
       {
          params: i,
          el: n,
          wrapperEl: r,
          device: o
       } = t,
       a = !!i.nested,
       l = e === "on" ? "addEventListener" : "removeEventListener",
       d = e;
    n[l]("pointerdown", t.onTouchStart, {
       passive: !1
    }), s[l]("pointermove", t.onTouchMove, {
       passive: !1,
       capture: a
    }), s[l]("pointerup", t.onTouchEnd, {
       passive: !0
    }), s[l]("pointercancel", t.onTouchEnd, {
       passive: !0
    }), s[l]("pointerout", t.onTouchEnd, {
       passive: !0
    }), s[l]("pointerleave", t.onTouchEnd, {
       passive: !0
    }), (i.preventClicks || i.preventClicksPropagation) && n[l]("click", t.onClick, !0), i.cssMode && r[l]("scroll", t.onScroll), i.updateOnWindowResize ? t[d](o.ios || o.android ? "resize orientationchange observerUpdate" : "resize observerUpdate", ge, !0) : t[d]("observerUpdate", ge, !0), n[l]("load", t.onLoad, {
       capture: !0
    })
 };
 
 function Ot() {
    const t = this,
       e = W(),
       {
          params: s
       } = t;
    t.onTouchStart = Mt.bind(t), t.onTouchMove = Pt.bind(t), t.onTouchEnd = Ct.bind(t), s.cssMode && (t.onScroll = At.bind(t)), t.onClick = Lt.bind(t), t.onLoad = It.bind(t), ve || (e.addEventListener("touchstart", zt), ve = !0), Ee(t, "on")
 }
 
 function kt() {
    Ee(this, "off")
 }
 var Gt = {
    attachEvents: Ot,
    detachEvents: kt
 };
 const we = (t, e) => t.grid && e.grid && e.grid.rows > 1;
 
 function $t() {
    const t = this,
       {
          realIndex: e,
          initialized: s,
          params: i,
          el: n
       } = t,
       r = i.breakpoints;
    if (!r || r && Object.keys(r).length === 0) return;
    const o = t.getBreakpoint(r, t.params.breakpointsBase, t.el);
    if (!o || t.currentBreakpoint === o) return;
    const l = (o in r ? r[o] : void 0) || t.originalParams,
       d = we(t, i),
       u = we(t, l),
       c = i.enabled;
    d && !u ? (n.classList.remove(`${i.containerModifierClass}grid`, `${i.containerModifierClass}grid-column`), t.emitContainerClasses()) : !d && u && (n.classList.add(`${i.containerModifierClass}grid`), (l.grid.fill && l.grid.fill === "column" || !l.grid.fill && i.grid.fill === "column") && n.classList.add(`${i.containerModifierClass}grid-column`), t.emitContainerClasses()), ["navigation", "pagination", "scrollbar"].forEach(m => {
       const T = i[m] && i[m].enabled,
          S = l[m] && l[m].enabled;
       T && !S && t[m].disable(), !T && S && t[m].enable()
    });
    const p = l.direction && l.direction !== i.direction,
       f = i.loop && (l.slidesPerView !== i.slidesPerView || p);
    p && s && t.changeDirection(), N(t.params, l);
    const w = t.params.enabled;
    Object.assign(t, {
       allowTouchMove: t.params.allowTouchMove,
       allowSlideNext: t.params.allowSlideNext,
       allowSlidePrev: t.params.allowSlidePrev
    }), c && !w ? t.disable() : !c && w && t.enable(), t.currentBreakpoint = o, t.emit("_beforeBreakpoint", l), f && s && (t.loopDestroy(), t.loopCreate(e), t.updateSlides()), t.emit("breakpoint", l)
 }
 
 function Dt(t, e = "window", s) {
    if (!t || e === "container" && !s) return;
    let i = !1;
    const n = B(),
       r = e === "window" ? n.innerHeight : s.clientHeight,
       o = Object.keys(t).map(a => {
          if (typeof a == "string" && a.indexOf("@") === 0) {
             const l = parseFloat(a.substr(1));
             return {
                value: r * l,
                point: a
             }
          }
          return {
             value: a,
             point: a
          }
       });
    o.sort((a, l) => parseInt(a.value, 10) - parseInt(l.value, 10));
    for (let a = 0; a < o.length; a += 1) {
       const {
          point: l,
          value: d
       } = o[a];
       e === "window" ? n.matchMedia(`(min-width: ${d}px)`).matches && (i = l) : d <= s.clientWidth && (i = l)
    }
    return i || "max"
 }
 var Vt = {
    setBreakpoint: $t,
    getBreakpoint: Dt
 };
 
 function Nt(t, e) {
    const s = [];
    return t.forEach(i => {
       typeof i == "object" ? Object.keys(i).forEach(n => {
          i[n] && s.push(e + n)
       }) : typeof i == "string" && s.push(e + i)
    }), s
 }
 
 function Bt() {
    const t = this,
       {
          classNames: e,
          params: s,
          rtl: i,
          el: n,
          device: r
       } = t,
       o = Nt(["initialized", s.direction, {
          "free-mode": t.params.freeMode && s.freeMode.enabled
       }, {
          autoheight: s.autoHeight
       }, {
          rtl: i
       }, {
          grid: s.grid && s.grid.rows > 1
       }, {
          "grid-column": s.grid && s.grid.rows > 1 && s.grid.fill === "column"
       }, {
          android: r.android
       }, {
          ios: r.ios
       }, {
          "css-mode": s.cssMode
       }, {
          centered: s.cssMode && s.centeredSlides
       }, {
          "watch-progress": s.watchSlidesProgress
       }], s.containerModifierClass);
    e.push(...o), n.classList.add(...e), t.emitContainerClasses()
 }
 
 function Ft() {
    const t = this,
       {
          el: e,
          classNames: s
       } = t;
    e.classList.remove(...s), t.emitContainerClasses()
 }
 var Ht = {
    addClasses: Bt,
    removeClasses: Ft
 };
 
 function qt() {
    const t = this,
       {
          isLocked: e,
          params: s
       } = t,
       {
          slidesOffsetBefore: i
       } = s;
    if (i) {
       const n = t.slides.length - 1,
          r = t.slidesGrid[n] + t.slidesSizesGrid[n] + i * 2;
       t.isLocked = t.size > r
    } else t.isLocked = t.snapGrid.length === 1;
    s.allowSlideNext === !0 && (t.allowSlideNext = !t.isLocked), s.allowSlidePrev === !0 && (t.allowSlidePrev = !t.isLocked), e && e !== t.isLocked && (t.isEnd = !1), e !== t.isLocked && t.emit(t.isLocked ? "lock" : "unlock")
 }
 var _t = {
       checkOverflow: qt
    },
    Se = {
       init: !0,
       direction: "horizontal",
       oneWayMovement: !1,
       touchEventsTarget: "wrapper",
       initialSlide: 0,
       speed: 300,
       cssMode: !1,
       updateOnWindowResize: !0,
       resizeObserver: !0,
       nested: !1,
       createElements: !1,
       enabled: !0,
       focusableElements: "input, select, option, textarea, button, video, label",
       width: null,
       height: null,
       preventInteractionOnTransition: !1,
       userAgent: null,
       url: null,
       edgeSwipeDetection: !1,
       edgeSwipeThreshold: 20,
       autoHeight: !1,
       setWrapperSize: !1,
       virtualTranslate: !1,
       effect: "slide",
       breakpoints: void 0,
       breakpointsBase: "window",
       spaceBetween: 0,
       slidesPerView: 1,
       slidesPerGroup: 1,
       slidesPerGroupSkip: 0,
       slidesPerGroupAuto: !1,
       centeredSlides: !1,
       centeredSlidesBounds: !1,
       slidesOffsetBefore: 0,
       slidesOffsetAfter: 0,
       normalizeSlideIndex: !0,
       centerInsufficientSlides: !1,
       watchOverflow: !0,
       roundLengths: !1,
       touchRatio: 1,
       touchAngle: 45,
       simulateTouch: !0,
       shortSwipes: !0,
       longSwipes: !0,
       longSwipesRatio: .5,
       longSwipesMs: 300,
       followFinger: !0,
       allowTouchMove: !0,
       threshold: 5,
       touchMoveStopPropagation: !1,
       touchStartPreventDefault: !0,
       touchStartForcePreventDefault: !1,
       touchReleaseOnEdges: !1,
       uniqueNavElements: !0,
       resistance: !0,
       resistanceRatio: .85,
       watchSlidesProgress: !1,
       grabCursor: !1,
       preventClicks: !0,
       preventClicksPropagation: !0,
       slideToClickedSlide: !1,
       loop: !1,
       loopedSlides: null,
       loopPreventsSliding: !0,
       rewind: !1,
       allowSlidePrev: !0,
       allowSlideNext: !0,
       swipeHandler: null,
       noSwiping: !0,
       noSwipingClass: "swiper-no-swiping",
       noSwipingSelector: null,
       passiveListeners: !0,
       maxBackfaceHiddenSlides: 10,
       containerModifierClass: "swiper-",
       slideClass: "swiper-slide",
       slideActiveClass: "swiper-slide-active",
       slideVisibleClass: "swiper-slide-visible",
       slideNextClass: "swiper-slide-next",
       slidePrevClass: "swiper-slide-prev",
       wrapperClass: "swiper-wrapper",
       lazyPreloaderClass: "swiper-lazy-preloader",
       runCallbacksOnInit: !0,
       _emitClasses: !1
    };
 
 function Rt(t, e) {
    return function (i = {}) {
       const n = Object.keys(i)[0],
          r = i[n];
       if (typeof r != "object" || r === null) {
          N(e, i);
          return
       }
       if (["navigation", "pagination", "scrollbar"].indexOf(n) >= 0 && t[n] === !0 && (t[n] = {
             auto: !0
          }), !(n in t && "enabled" in r)) {
          N(e, i);
          return
       }
       t[n] === !0 && (t[n] = {
          enabled: !0
       }), typeof t[n] == "object" && !("enabled" in t[n]) && (t[n].enabled = !0), t[n] || (t[n] = {
          enabled: !1
       }), N(e, i)
    }
 }
 const le = {
       eventsEmitter: He,
       update: Je,
       translate: rt,
       transition: ot,
       slide: gt,
       loop: Tt,
       grabCursor: xt,
       events: Gt,
       breakpoints: Vt,
       checkOverflow: _t,
       classes: Ht
    },
    oe = {};
 class F {
    constructor(...e) {
       let s, i;
       e.length === 1 && e[0].constructor && Object.prototype.toString.call(e[0]).slice(8, -1) === "Object" ? i = e[0] : [s, i] = e, i || (i = {}), i = N({}, i), s && !i.el && (i.el = s);
       const n = W();
       if (i.el && typeof i.el == "string" && n.querySelectorAll(i.el).length > 1) {
          const l = [];
          return n.querySelectorAll(i.el).forEach(d => {
             const u = N({}, i, {
                el: d
             });
             l.push(new F(u))
          }), l
       }
       const r = this;
       r.__swiper__ = !0, r.support = ye(), r.device = De({
          userAgent: i.userAgent
       }), r.browser = Ne(), r.eventsListeners = {}, r.eventsAnyListeners = [], r.modules = [...r.__modules__], i.modules && Array.isArray(i.modules) && r.modules.push(...i.modules);
       const o = {};
       r.modules.forEach(l => {
          l({
             params: i,
             swiper: r,
             extendParams: Rt(i, o),
             on: r.on.bind(r),
             once: r.once.bind(r),
             off: r.off.bind(r),
             emit: r.emit.bind(r)
          })
       });
       const a = N({}, Se, o);
       return r.params = N({}, a, oe, i), r.originalParams = N({}, r.params), r.passedParams = N({}, i), r.params && r.params.on && Object.keys(r.params.on).forEach(l => {
          r.on(l, r.params.on[l])
       }), r.params && r.params.onAny && r.onAny(r.params.onAny), Object.assign(r, {
          enabled: r.params.enabled,
          el: s,
          classNames: [],
          slides: [],
          slidesGrid: [],
          snapGrid: [],
          slidesSizesGrid: [],
          isHorizontal() {
             return r.params.direction === "horizontal"
          },
          isVertical() {
             return r.params.direction === "vertical"
          },
          activeIndex: 0,
          realIndex: 0,
          isBeginning: !0,
          isEnd: !1,
          translate: 0,
          previousTranslate: 0,
          progress: 0,
          velocity: 0,
          animating: !1,
          allowSlideNext: r.params.allowSlideNext,
          allowSlidePrev: r.params.allowSlidePrev,
          touchEventsData: {
             isTouched: void 0,
             isMoved: void 0,
             allowTouchCallbacks: void 0,
             touchStartTime: void 0,
             isScrolling: void 0,
             currentTranslate: void 0,
             startTranslate: void 0,
             allowThresholdMove: void 0,
             focusableElements: r.params.focusableElements,
             lastClickTime: U(),
             clickTimeout: void 0,
             velocities: [],
             allowMomentumBounce: void 0,
             startMoving: void 0,
             evCache: []
          },
          allowClick: !0,
          allowTouchMove: r.params.allowTouchMove,
          touches: {
             startX: 0,
             startY: 0,
             currentX: 0,
             currentY: 0,
             diff: 0
          },
          imagesToLoad: [],
          imagesLoaded: 0
       }), r.emit("_swiper"), r.params.init && r.init(), r
    }
    recalcSlides() {
       const e = this,
          {
             slidesEl: s,
             params: i
          } = e;
       e.slides = R(s, `.${i.slideClass}, swiper-slide`)
    }
    enable() {
       const e = this;
       e.enabled || (e.enabled = !0, e.params.grabCursor && e.setGrabCursor(), e.emit("enable"))
    }
    disable() {
       const e = this;
       !e.enabled || (e.enabled = !1, e.params.grabCursor && e.unsetGrabCursor(), e.emit("disable"))
    }
    setProgress(e, s) {
       const i = this;
       e = Math.min(Math.max(e, 0), 1);
       const n = i.minTranslate(),
          o = (i.maxTranslate() - n) * e + n;
       i.translateTo(o, typeof s == "undefined" ? 0 : s), i.updateActiveIndex(), i.updateSlidesClasses()
    }
    emitContainerClasses() {
       const e = this;
       if (!e.params._emitClasses || !e.el) return;
       const s = e.el.className.split(" ").filter(i => i.indexOf("swiper") === 0 || i.indexOf(e.params.containerModifierClass) === 0);
       e.emit("_containerClasses", s.join(" "))
    }
    getSlideClasses(e) {
       const s = this;
       return s.destroyed ? "" : e.className.split(" ").filter(i => i.indexOf("swiper-slide") === 0 || i.indexOf(s.params.slideClass) === 0).join(" ")
    }
    emitSlidesClasses() {
       const e = this;
       if (!e.params._emitClasses || !e.el) return;
       const s = [];
       e.slides.forEach(i => {
          const n = e.getSlideClasses(i);
          s.push({
             slideEl: i,
             classNames: n
          }), e.emit("_slideClass", i, n)
       }), e.emit("_slideClasses", s)
    }
    slidesPerViewDynamic(e = "current", s = !1) {
       const i = this,
          {
             params: n,
             slides: r,
             slidesGrid: o,
             slidesSizesGrid: a,
             size: l,
             activeIndex: d
          } = i;
       let u = 1;
       if (n.centeredSlides) {
          let c = r[d].swiperSlideSize,
             p;
          for (let f = d + 1; f < r.length; f += 1) r[f] && !p && (c += r[f].swiperSlideSize, u += 1, c > l && (p = !0));
          for (let f = d - 1; f >= 0; f -= 1) r[f] && !p && (c += r[f].swiperSlideSize, u += 1, c > l && (p = !0))
       } else if (e === "current")
          for (let c = d + 1; c < r.length; c += 1)(s ? o[c] + a[c] - o[d] < l : o[c] - o[d] < l) && (u += 1);
       else
          for (let c = d - 1; c >= 0; c -= 1) o[d] - o[c] < l && (u += 1);
       return u
    }
    update() {
       const e = this;
       if (!e || e.destroyed) return;
       const {
          snapGrid: s,
          params: i
       } = e;
       i.breakpoints && e.setBreakpoint(), [...e.el.querySelectorAll('[loading="lazy"]')].forEach(o => {
          o.complete && ee(e, o)
       }), e.updateSize(), e.updateSlides(), e.updateProgress(), e.updateSlidesClasses();
 
       function n() {
          const o = e.rtlTranslate ? e.translate * -1 : e.translate,
             a = Math.min(Math.max(o, e.maxTranslate()), e.minTranslate());
          e.setTranslate(a), e.updateActiveIndex(), e.updateSlidesClasses()
       }
       let r;
       e.params.freeMode && e.params.freeMode.enabled ? (n(), e.params.autoHeight && e.updateAutoHeight()) : ((e.params.slidesPerView === "auto" || e.params.slidesPerView > 1) && e.isEnd && !e.params.centeredSlides ? r = e.slideTo(e.slides.length - 1, 0, !1, !0) : r = e.slideTo(e.activeIndex, 0, !1, !0), r || n()), i.watchOverflow && s !== e.snapGrid && e.checkOverflow(), e.emit("update")
    }
    changeDirection(e, s = !0) {
       const i = this,
          n = i.params.direction;
       return e || (e = n === "horizontal" ? "vertical" : "horizontal"), e === n || e !== "horizontal" && e !== "vertical" || (i.el.classList.remove(`${i.params.containerModifierClass}${n}`), i.el.classList.add(`${i.params.containerModifierClass}${e}`), i.emitContainerClasses(), i.params.direction = e, i.slides.forEach(r => {
          e === "vertical" ? r.style.width = "" : r.style.height = ""
       }), i.emit("changeDirection"), s && i.update()), i
    }
    changeLanguageDirection(e) {
       const s = this;
       s.rtl && e === "rtl" || !s.rtl && e === "ltr" || (s.rtl = e === "rtl", s.rtlTranslate = s.params.direction === "horizontal" && s.rtl, s.rtl ? (s.el.classList.add(`${s.params.containerModifierClass}rtl`), s.el.dir = "rtl") : (s.el.classList.remove(`${s.params.containerModifierClass}rtl`), s.el.dir = "ltr"), s.update())
    }
    mount(e) {
       const s = this;
       if (s.mounted) return !0;
       let i = e || s.params.el;
       if (typeof i == "string" && (i = document.querySelector(i)), !i) return !1;
       i.swiper = s, i.shadowEl && (s.isElement = !0);
       const n = () => `.${(s.params.wrapperClass||"").trim().split(" ").join(".")}`;
       let o = (() => i && i.shadowRoot && i.shadowRoot.querySelector ? i.shadowRoot.querySelector(n()) : R(i, n())[0])();
       return !o && s.params.createElements && (o = Y("div", s.params.wrapperClass), i.append(o), R(i, `.${s.params.slideClass}`).forEach(a => {
          o.append(a)
       })), Object.assign(s, {
          el: i,
          wrapperEl: o,
          slidesEl: s.isElement ? i : o,
          mounted: !0,
          rtl: i.dir.toLowerCase() === "rtl" || _(i, "direction") === "rtl",
          rtlTranslate: s.params.direction === "horizontal" && (i.dir.toLowerCase() === "rtl" || _(i, "direction") === "rtl"),
          wrongRTL: _(o, "display") === "-webkit-box"
       }), !0
    }
    init(e) {
       const s = this;
       return s.initialized || s.mount(e) === !1 || (s.emit("beforeInit"), s.params.breakpoints && s.setBreakpoint(), s.addClasses(), s.updateSize(), s.updateSlides(), s.params.watchOverflow && s.checkOverflow(), s.params.grabCursor && s.enabled && s.setGrabCursor(), s.params.loop && s.virtual && s.params.virtual.enabled ? s.slideTo(s.params.initialSlide + s.virtual.slidesBefore, 0, s.params.runCallbacksOnInit, !1, !0) : s.slideTo(s.params.initialSlide, 0, s.params.runCallbacksOnInit, !1, !0), s.params.loop && s.loopCreate(), s.attachEvents(), [...s.el.querySelectorAll('[loading="lazy"]')].forEach(n => {
          n.complete ? ee(s, n) : n.addEventListener("load", r => {
             ee(s, r.target)
          })
       }), s.initialized = !0, s.emit("init"), s.emit("afterInit")), s
    }
    destroy(e = !0, s = !0) {
       const i = this,
          {
             params: n,
             el: r,
             wrapperEl: o,
             slides: a
          } = i;
       return typeof i.params == "undefined" || i.destroyed || (i.emit("beforeDestroy"), i.initialized = !1, i.detachEvents(), n.loop && i.loopDestroy(), s && (i.removeClasses(), r.removeAttribute("style"), o.removeAttribute("style"), a && a.length && a.forEach(l => {
          l.classList.remove(n.slideVisibleClass, n.slideActiveClass, n.slideNextClass, n.slidePrevClass), l.removeAttribute("style"), l.removeAttribute("data-swiper-slide-index")
       })), i.emit("destroy"), Object.keys(i.eventsListeners).forEach(l => {
          i.off(l)
       }), e !== !1 && (i.el.swiper = null, Ce(i)), i.destroyed = !0), null
    }
    static extendDefaults(e) {
       N(oe, e)
    }
    static get extendedDefaults() {
       return oe
    }
    static get defaults() {
       return Se
    }
    static installModule(e) {
       F.prototype.__modules__ || (F.prototype.__modules__ = []);
       const s = F.prototype.__modules__;
       typeof e == "function" && s.indexOf(e) < 0 && s.push(e)
    }
    static use(e) {
       return Array.isArray(e) ? (e.forEach(s => F.installModule(s)), F) : (F.installModule(e), F)
    }
 }
 Object.keys(le).forEach(t => {
    Object.keys(le[t]).forEach(e => {
       F.prototype[e] = le[t][e]
    })
 });
 F.use([Be, Fe]);
 
 function Wt(t) {
    const {
       effect: e,
       swiper: s,
       on: i,
       setTranslate: n,
       setTransition: r,
       overwriteParams: o,
       perspective: a,
       recreateShadows: l,
       getEffectParams: d
    } = t;
    i("beforeInit", () => {
       if (s.params.effect !== e) return;
       s.classNames.push(`${s.params.containerModifierClass}${e}`), a && a() && s.classNames.push(`${s.params.containerModifierClass}3d`);
       const c = o ? o() : {};
       Object.assign(s.params, c), Object.assign(s.originalParams, c)
    }), i("setTranslate", () => {
       s.params.effect === e && n()
    }), i("setTransition", (c, p) => {
       s.params.effect === e && r(p)
    }), i("transitionEnd", () => {
       if (s.params.effect === e && l) {
          if (!d || !d().slideShadows) return;
          s.slides.forEach(c => {
             c.querySelectorAll(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").forEach(p => p.remove())
          }), l()
       }
    });
    let u;
    i("virtualUpdate", () => {
       s.params.effect === e && (s.slides.length || (u = !0), requestAnimationFrame(() => {
          u && s.slides && s.slides.length && (n(), u = !1)
       }))
    })
 }
 
 function jt({
    swiper: t,
    extendParams: e,
    on: s
 }) {
    e({
       cubeEffect: {
          slideShadows: !0,
          shadow: !0,
          shadowOffset: 20,
          shadowScale: .94
       }
    });
    const i = (a, l, d) => {
       let u = d ? a.querySelector(".swiper-slide-shadow-left") : a.querySelector(".swiper-slide-shadow-top"),
          c = d ? a.querySelector(".swiper-slide-shadow-right") : a.querySelector(".swiper-slide-shadow-bottom");
       u || (u = Y("div", `swiper-slide-shadow-${d?"left":"top"}`), a.append(u)), c || (c = Y("div", `swiper-slide-shadow-${d?"right":"bottom"}`), a.append(c)), u && (u.style.opacity = Math.max(-l, 0)), c && (c.style.opacity = Math.max(l, 0))
    };
    Wt({
       effect: "cube",
       swiper: t,
       on: s,
       setTranslate: () => {
          const {
             el: a,
             wrapperEl: l,
             slides: d,
             width: u,
             height: c,
             rtlTranslate: p,
             size: f,
             browser: w
          } = t, m = t.params.cubeEffect, T = t.isHorizontal(), S = t.virtual && t.params.virtual.enabled;
          let P = 0,
             g;
          m.shadow && (T ? (g = t.slidesEl.querySelector(".swiper-cube-shadow"), g || (g = Y("div", "swiper-cube-shadow"), t.slidesEl.append(g)), g.style.height = `${u}px`) : (g = a.querySelector(".swiper-cube-shadow"), g || (g = Y("div", "swiper-cube-shadow"), a.append(g))));
          for (let y = 0; y < d.length; y += 1) {
             const x = d[y];
             let I = y;
             S && (I = parseInt(x.getAttribute("data-swiper-slide-index"), 10));
             let O = I * 90,
                z = Math.floor(O / 360);
             p && (O = -O, z = Math.floor(-O / 360));
             const V = Math.max(Math.min(x.progress, 1), -1);
             let v = 0,
                E = 0,
                L = 0;
             I % 4 === 0 ? (v = -z * 4 * f, L = 0) : (I - 1) % 4 === 0 ? (v = 0, L = -z * 4 * f) : (I - 2) % 4 === 0 ? (v = f + z * 4 * f, L = f) : (I - 3) % 4 === 0 && (v = -f, L = 3 * f + f * 4 * z), p && (v = -v), T || (E = v, v = 0);
             const D = `rotateX(${T?0:-O}deg) rotateY(${T?O:0}deg) translate3d(${v}px, ${E}px, ${L}px)`;
             V <= 1 && V > -1 && (P = I * 90 + V * 90, p && (P = -I * 90 - V * 90)), x.style.transform = D, m.slideShadows && i(x, V, T)
          }
          if (l.style.transformOrigin = `50% 50% -${f/2}px`, l.style["-webkit-transform-origin"] = `50% 50% -${f/2}px`, m.shadow)
             if (T) g.style.transform = `translate3d(0px, ${u/2+m.shadowOffset}px, ${-u/2}px) rotateX(90deg) rotateZ(0deg) scale(${m.shadowScale})`;
             else {
                const y = Math.abs(P) - Math.floor(Math.abs(P) / 90) * 90,
                   x = 1.5 - (Math.sin(y * 2 * Math.PI / 360) / 2 + Math.cos(y * 2 * Math.PI / 360) / 2),
                   I = m.shadowScale,
                   O = m.shadowScale / x,
                   z = m.shadowOffset;
                g.style.transform = `scale3d(${I}, 1, ${O}) translate3d(0px, ${c/2+z}px, ${-c/2/O}px) rotateX(-90deg)`
             } const b = (w.isSafari || w.isWebView) && w.needPerspectiveFix ? -f / 2 : 0;
          l.style.transform = `translate3d(0px,0,${b}px) rotateX(${t.isHorizontal()?0:P}deg) rotateY(${t.isHorizontal()?-P:0}deg)`, l.style.setProperty("--swiper-cube-translate-z", `${b}px`)
       },
       setTransition: a => {
          const {
             el: l,
             slides: d
          } = t;
          if (d.forEach(u => {
                u.style.transitionDuration = `${a}ms`, u.querySelectorAll(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").forEach(c => {
                   c.style.transitionDuration = `${a}ms`
                })
             }), t.params.cubeEffect.shadow && !t.isHorizontal()) {
             const u = l.querySelector(".swiper-cube-shadow");
             u && (u.style.transitionDuration = `${a}ms`)
          }
       },
       recreateShadows: () => {
          const a = t.isHorizontal();
          t.slides.forEach(l => {
             const d = Math.max(Math.min(l.progress, 1), -1);
             i(l, d, a)
          })
       },
       getEffectParams: () => t.params.cubeEffect,
       perspective: () => !0,
       overwriteParams: () => ({
          slidesPerView: 1,
          slidesPerGroup: 1,
          watchSlidesProgress: !0,
          resistanceRatio: 0,
          spaceBetween: 0,
          centeredSlides: !1,
          virtualTranslate: !0
       })
    })
 }
 
 function Xt(t, e = {}) {
    const s = t.querySelector(".swiper"),
       {
          autoplayDuration: i = 5e3,
          Swiper: n,
          EffectCube: r,
          onSlidesIndexesChange: o,
          onAutoplayStart: a,
          onAutoplayStop: l
       } = e;
    let {
       enabled: d = !0
    } = e, u = 0, c, p;
    const f = [];
    let w, m, T, S, P, g, b, y;
    const x = (h, M) => {
          const C = f.indexOf(h);
          let A = typeof M == "undefined" ? i : M,
             k = parseInt(h.slides[h.activeIndex].getAttribute("data-duration"), 10);
          const H = h.slides[h.activeIndex].querySelector("video");
          return Number.isNaN(k) && H && (k = H.duration * 1e3), !Number.isNaN(k) && k > 0 && typeof M == "undefined" && (A = k), b = A, h.codeplanersSliderAutoplayTimeout = setTimeout(() => {
             if (!h.isEnd) h.slideNext();
             else {
                if (u !== C) return;
                c.isEnd || c.slideNext()
             }
          }, A), a && a(h), A
       },
       I = h => {
          clearTimeout(h.codeplanersSliderAutoplayTimeout), l && l(h)
       },
       O = h => {
          I(h);
          const M = h.slides[h.activeIndex].querySelector("video");
          M && (cancelAnimationFrame(p), M.pause());
          const C = b || i;
          let A = parseInt(h.slides[h.activeIndex].getAttribute("data-duration"), 10);
          if (Number.isNaN(A) && (A = void 0), !A && M && (A = M.duration * 1e3), b = C - (new Date().getTime() - g), h.isEnd && b < 0) return;
          b < 0 && (b = 0);
          const k = 1 - b / (A || i),
             H = h.el.querySelector(`.codeplaners-slider-pagination-bullet:nth-child(${h.activeIndex+1})`);
          H.querySelector("span").remove(), H.insertAdjacentHTML("beforeend", ``)
       },
       z = h => {
          if (h.isEnd && b < 0) return;
          g = new Date().getTime(), x(h, b);
          const M = h.slides[h.activeIndex].querySelector("video");
          if (M) try {
             p = requestAnimationFrame(() => {
                M.play()
             })
          } catch {}
          const C = h.el.querySelector(`.codeplaners-slider-pagination-bullet:nth-child(${h.activeIndex+1}) > span`);
          C.style.transform = "translateX(0%)", C.style.transitionDuration = `${b}ms`
       },
       V = h => {
          I(h), x(h), g = new Date().getTime();
          const M = h.el.querySelector(".codeplaners-slider-pagination-bullet-current");
          M && M.classList.remove("codeplaners-slider-pagination-bullet-current");
          const C = h.el.querySelector(`.codeplaners-slider-pagination-bullet:nth-child(${h.activeIndex+1})`),
             A = h.slides[h.activeIndex].querySelector("video");
          if (A) {
             A.currentTime = 0;
             try {
                p = requestAnimationFrame(() => {
                   A.play()
                })
             } catch {}
          }
          h.slides.forEach(G => {
             G.querySelectorAll("video").forEach($ => {
                $ !== A && ($.currentTime = 0, A || cancelAnimationFrame(p), $.pause())
             })
          }), f.filter((G, $) => $ !== u).forEach(G => {
             G.el.querySelectorAll("video").forEach($ => {
                A || cancelAnimationFrame(p), $.pause()
             })
          });
          const k = [...C.parentElement.children],
             H = [...k].filter((G, $) => $ < k.indexOf(C)),
             ie = [...k].filter((G, $) => $ > k.indexOf(C));
          H.forEach(G => {
             G.classList.add("codeplaners-slider-pagination-bullet-viewed"), G.querySelectorAll("span").forEach($ => $.remove()), G.insertAdjacentHTML("beforeend", "")
          }), ie.forEach(G => {
             G.classList.remove("codeplaners-slider-pagination-bullet-viewed", "codeplaners-slider-pagination-bullet-current"), G.querySelectorAll("span").forEach($ => $.remove()), G.insertAdjacentHTML("beforeend", "")
          }), C.classList.remove("codeplaners-slider-pagination-bullet-viewed"), C.classList.add("codeplaners-slider-pagination-bullet-current"), [...C.children].forEach(G => G.remove()), C.insertAdjacentHTML("beforeend", ""), C.clientWidth, C.querySelector("span").style.transform = "translateX(0%)", C.querySelector("span").style.transitionDuration = `${b}ms`, o && (cancelAnimationFrame(w), w = requestAnimationFrame(() => {
             o(u, h.activeIndex)
          }))
       },
       v = () => {
          const h = () => {
                t.classList.add("codeplaners-slider-perspective")
             },
             M = () => {
                t.classList.remove("codeplaners-slider-perspective")
             };
          c = new n(s, {
             modules: typeof r != "undefined" ? [r] : [],
             effect: "cube",
             speed: 500,
             threshold: 5,
             cubeEffect: {
                shadow: !1
             },
             observer: !0,
             on: {
                transitionStart() {
                   M()
                },
                sliderFirstMove() {
                   M()
                },
                transitionEnd() {
                   h()
                },
                init(C) {
                   C.params.resistanceRatio = .5, h()
                },
                slideChange() {
                   const C = f[u];
                   u = c.activeIndex;
                   const A = f[u];
                   I(C), x(A), V(A)
                }
             }
          })
       },
       E = h => {
          const M = h.querySelectorAll(".swiper-slide"),
             C = document.createElement("div");
          C.classList.add("codeplaners-slider-pagination");
          for (let A = 0; A < M.length; A += 1) {
             const k = document.createElement("div");
             k.classList.add("codeplaners-slider-pagination-bullet"), k.appendChild(document.createElement("span")), C.appendChild(k)
          }
          h.appendChild(C)
       },
       L = h => {
          h.el.querySelectorAll(".codeplaners-slider-pagination, .codeplaners-slider-pagination-bullet").forEach(M => M.remove())
       },
       D = (h, M) => {
          h.querySelectorAll(".swiper-slide").forEach(A => {
             const k = document.createElement("div"),
                H = document.createElement("div");
             k.classList.add("codeplaners-slider-button", "codeplaners-slider-button-prev"), H.classList.add("codeplaners-slider-button", "codeplaners-slider-button-next"), A.appendChild(k), A.appendChild(H);
             const ie = () => {
                   if (!(P > 200)) {
                      if (M.isBeginning) {
                         c.slidePrev();
                         return
                      }
                      M.slidePrev()
                   }
                },
                G = () => {
                   if (!(P > 200)) {
                      if (M.isEnd) {
                         c.slideNext();
                         return
                      }
                      M.slideNext()
                   }
                };
             k.addEventListener("click", ie), H.addEventListener("click", G)
          })
       },
       X = h => {
          h.el.querySelectorAll(".codeplaners-slider-button").forEach(M => M.remove())
       },
       Z = () => {
          t.querySelectorAll(".swiper .swiper").forEach((h, M) => {
             const C = new n(h, {
                speed: 1,
                nested: !0,
                allowTouchMove: !1,
                observer: !0,
                on: {
                   touchStart(A) {
                      m = !0, y = !1, T = new Date().getTime(), S = setTimeout(() => {
                         y = !0, O(A)
                      }, 200)
                   },
                   touchEnd(A) {
                      clearTimeout(S), u === M && (!m || (P = new Date().getTime() - T, y && z(A), y = !1, m = !1))
                   },
                   init(A) {
                      !d || (u !== M ? I(A) : requestAnimationFrame(() => {
                         V(A)
                      }))
                   },
                   slideChange(A) {
                      V(A)
                   }
                }
             });
             E(h), D(h, C), f.push(C)
          })
       };
    return v(), Z(), {
       el: t,
       mainSwiper: c,
       subSwipers: f,
       destroy: () => {
          c && c.destroy && c.destroy(), f.forEach(h => {
             I(h), L(h), X(h), h.destroy && h.destroy()
          })
       },
       slideTo: (h, M) => {
          if (c && c.slideTo && !c.destroyed && c.slideTo(h, 0), typeof M != "undefined") {
             const C = f[h];
             C.slideTo && !C.destroyed && (C.activeIndex === M ? V(C) : C.slideTo(M, 0))
          }
       },
       enable: () => {
          d || f.forEach((h, M) => {
             M === u && V(h)
          })
       },
       disable: () => {
          d = !1, f.forEach((h, M) => {
             h.el.querySelectorAll("video").forEach(C => {
                cancelAnimationFrame(p), C.pause()
             }), M === u ? O(h) : I(h)
          })
       }
    }
 }
 const q = document.querySelector(".codeplaners-slider"),
    K = Xt(q, {
       Swiper: F,
       EffectCube: jt,
       autoplayDuration: 5e3,
       enabled: !1,
       onSlidesIndexesChange(t, e) {
          console.log({
             mainIndex: t,
             subIndex: e
          })
       }
    });
 document.querySelectorAll(".demo-codeplaners a").forEach((t, e) => {
    t.addEventListener("click", s => {
       s.preventDefault(), q.classList.add("codeplaners-slider-in"), K.enable(), K.slideTo(e, 0)
    })
 });
 document.querySelectorAll(".demo-post-avatar").forEach(t => {
    const e = parseInt(t.getAttribute("data-user-index"), 10);
    t.addEventListener("click", s => {
       s.preventDefault(), q.classList.add("codeplaners-slider-in"), K.enable(), K.slideTo(e, 0)
    })
 });
 q.addEventListener("click", t => {
    t.target.matches(".codeplaners-slider-close-button") && (K.disable(), q.classList.add("codeplaners-slider-out"))
 });
 q.addEventListener("animationend", () => {
    q.classList.contains("codeplaners-slider-out") && (q.classList.remove("codeplaners-slider-in"), q.classList.remove("codeplaners-slider-out"))
 });

Downoload File

Stories-Slide-Example

I hope it will assist you…

The post Stories Slide Example appeared first on Codeplaners.

Social Media Icon With pop-up Effect Example

admin — Sat, 25 Mar 2023 08:53:15 +0000

This post was last updated on May 13th, 2023 at 01:16 am

Hi Dev,

Today, i will show you social media icon with pop-up effect example. This article will give you simple example of social media icon with pop-up effect example. you will social media icon with pop-up effect example. In this article, we will implement a social media icon with pop-up effect example.

So, let’s follow few steps to create example of social media icon with pop-up effect example.

Example

index.html




    
    
    
    social media icon with pop-up effect example - codeplaners
    
    


   


    
        
          Facebook
          
        
        
          Twitter
          
        
        
          Instagram
          
        
        
          Github
          
        
        
          Youtube

I hope it will assist you…

The post Social Media Icon With pop-up Effect Example appeared first on Codeplaners.

Mouse Move Text Animation Effect Example

admin — Sat, 25 Mar 2023 08:04:26 +0000

Hi Dev,

Today, i will show you mouse move text animation effect example. This article will give you simple example of mouse move text animation effect example. you will mouse move text animation effect example. In this article, we will implement a mouse move text animation effect example.

So, let’s follow few steps to create example of mouse move text animation effect example.

Example

index.html




    
    
    
    Mouse Move Text Animation Effects Example - codeplaners
    


    
   
     
    CODE
PLANERS

I hope it will assist you…

The post Mouse Move Text Animation Effect Example appeared first on Codeplaners.

Login Form CSS and Html Example

admin — Fri, 24 Mar 2023 09:30:36 +0000

Hi Dev,

Today, i we will show you Login Form CSS and Html example. This article will give you simple example of Login Form CSS and Html example. you will Login Form CSS and Html example. In this article, we will implement a Login Form CSS and Html example.

So, let’s follow few steps to create example of Login Form CSS and Html example.

Example

index.html




    
    
    
    Login Form CSS and Html example - codeplaners




    
  Login
  
    
      
      Username
    
    
      
      Password
    
    
      
      
      
      
      Submit

I hope it will assist you…

The post Login Form CSS and Html Example appeared first on Codeplaners.

Clock In Javascript Example

admin — Fri, 24 Mar 2023 09:17:15 +0000

Hi Dev,

Today, i we will show you Clock In Javascript Example. This article will give you simple example of Clock In Javascript Example. you will Clock In Javascript Example. In this article, we will implement a Clock In Javascript Example.

So, let’s follow few steps to create example of Clock In Javascript Example.

Example

index.html




  
  Clock In Javascript Example - codeplaners
  
  
 





	
		
			00
			00
		
	
	
	
		
			00
			00
		
	
	
	
		
			00
			00
		
	
	
		
			PM
			AM

I hope it will assist you…

The post Clock In Javascript Example appeared first on Codeplaners.

How to create JavaScript Quiz Example

admin — Fri, 10 Feb 2023 03:40:06 +0000

Hi Dev,

Today, i we will show you How to create JavaScript Quiz Example. This article will give you simple example of How to create JavaScript Quiz Example. you will How to create JavaScript Quiz Example. In this article, we will implement a How to create JavaScript Quiz Example.

So, let’s follow few steps to create example of How to create JavaScript Quiz Example.

Example

index.html




	Codeplaners Quiz




	
           
           	
           
           
           
           	  
           	  	  
           	  	  
           	  	  
           	  	  
           	  
           
           
           	   
           	   	  
           	   
           	   
           	   	  Score : 0

style.css

 body{
  background-color: #fff;
  margin:0;
  padding:0;
}
*{
  box-sizing: border-box;
  font-family: sans-serif;
}

.wrapper{
  height: 450px;
  width: 650px;
  background-color: white;
  margin:50px auto;
  border-radius: 8px;
  margin-top: 150px;

}

.wrapper .question{
  padding: 15px;
  background-color:#673ab7;
  border-radius: 8px;
  color:#ffffff;
  font-size:20px;
  float: left;
  width: 100%;

}
.wrapper .options{
  float: left;
  width: 100%;
}

.wrapper .options ul{
  list-style: none;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrapper .options ul li{
  display: inline-block;
  background-color:#000;
  width: 47%;
  padding: 15px;
  border-radius:8px;
  margin-top: 25px;
  font-size: 15px;
  color:#ffffff;
  box-shadow: 0px 3px 0px grey;
  cursor: pointer;
  outline: none;
  text-align: center;
}
.wrapper .options ul li:active{
  box-shadow: 0px 3px 0px transparent;  

}
.wrapper .options ul li.correct{
  background-color: #0fd40f;
  box-shadow: 0px 3px 0px #03a503;
}

.wrapper .options ul li.wrong{
  background-color: #e91e1e;
  box-shadow: 0px 3px 0px #cb0b0b;
}

.wrapper .score{
  float: left;
  width: 100%;
  padding:25px 0px;
}

.wrapper .score .next{
  width: 35%;
  float: right;
}
.wrapper .score .next button{
  padding: 15px 80px;
  color:white;
  background-color:#00b0ff;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #00b0ff;
  outline: none;
}
.wrapper .score .next button:active{
box-shadow: 0px 3px 0px transparent;  
}



.wrapper .score .back{
  width: 35%;
  float: center;
}
.wrapper .score .back button{
  padding: 15px 80px;
  color:white;
  background-color:#00b0ff;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #00b0ff;
  outline: none;
}
.wrapper .score .back button:active{
box-shadow: 0px 3px 0px transparent;  
}


.wrapper .score .restart{
  width: 1%;
  float: right;
  margin-top: 30px;
}
.wrapper .score .restart button{
  padding: 15px 64px;
  color:white;
  background-color:red;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #c97a06;
  outline: none;

}
.wrapper .score .restart button:active{
box-shadow: 0px 3px 0px transparent;  
}



.wrapper .score .score-card{
  width: 30%;
  float: right;
}
.wrapper .score .score-card{
  font-size: 20px;
  color:black;
  line-height: 50px;
  text-transform: uppercase;

}
.wrapper .score .score-card span{
  background-color: #4caf50;
  padding: 5px 15px;
  border-radius: 8px;
  color:#ffffff;

}

The post How to create JavaScript Quiz Example appeared first on Codeplaners.

How to auto submit the form by the select option

admin — Thu, 14 Jul 2022 05:15:46 +0000

Hi Dev,

Today, i we will show you How to auto submit the form by the select option. This article will give you simple example of How to auto submit the form by the select option. you will How to auto submit the form by the select option. In this article, we will implement a How to auto submit the form by the select option.

So let’s follow few step to create example of How to auto submit the form by the select option.

I hope it will assist you…

The post How to auto submit the form by the select option appeared first on Codeplaners.

Disable Resizable Property Of Textarea Using CSS

admin — Sat, 09 Apr 2022 06:08:55 +0000

Hi Dev,

Today, i we will show you disable resizable property of textarea using CSS. This article will give you simple example of disable resizable property of textarea using CSS. you will disable resizable property of textarea using CSS. In this article, we will implement a disable resizable property of textarea using CSS.

So let’s follow few step to create example of disable resizable property of textarea using CSS.

Example 1




Remove Textarea Resizing

I hope it will assist you…

The post Disable Resizable Property Of Textarea Using CSS appeared first on Codeplaners.

How To Create DataTable In Bootstrap

admin — Thu, 10 Feb 2022 12:03:23 +0000

Hi Dev,

Today, i we will show you how to create DataTable in bootstrap. This article will give you simple example of how to create DataTable in bootstrap. you will how to create DataTable in bootstrap. In this article, we will implement a how to create DataTable in bootstrap.

So let’s follow few step to create example of how to create DataTable in bootstrap.

Example





	 How To Create DataTable In Bootstrap
	
	
	



   
	
    
        
            
                
                    Name
                    Position
                    Office
                    Age
                    Start date
                    Salary
                
            
            
                
                    Tiger Nixon
                    System Architect
                    Edinburgh
                    61
                    2011/04/25
                    $320,800
                
                
                    Garrett Winters
                    Accountant
                    Tokyo
                    63
                    2011/07/25
                    $170,750
                
                
                    Ashton Cox
                    Junior Technical Author
                    San Francisco
                    66
                    2009/01/12
                    $86,000
                
               
            
            
                
                    Name
                    Position
                    Office
                    Age
                    Start date
                    Salary

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Name	Position	Office	Age	Start date	Salary

I hope it will assist you…

The post How To Create DataTable In Bootstrap appeared first on Codeplaners.