Slider – Documentation – Shortcodes Ultimate

snippet

@wnakswl

#video #slider #slick

Slick Slider - Video Play slide activo

// On slide change, pause all videos
$('#main-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('video').each(function() {
    $(this).get(0).pause();
  });
});

// On slide chnage, play a video inside the current slide
$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  if( $('.project-slide.slick-current').find('video').length !== 0) {
    $("#main-slider .slick-current video")[0].play();
  }
});

#snippet #wp #shortcode #slider

Content Slider – Documentation – Shortcodes Ultimate

<strong>Mixed content</strong>
[su_content_slider effect="goDown" autoplay="0" style="dark" pages="yes"]
[su_content_slide]
[su_spoiler title="Spoiler shortcode" style="fancy" icon="plus-square-1"]Hidden content[/su_spoiler]
[/su_content_slide]
[su_content_slide]
[su_service title="Service shortcode" icon="icon: star" icon_color="#fccb00"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.[/su_service]
[su_box title="Box shortcode" box_color="#dddddd" title_color="#393939"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.[/su_box]
[/su_content_slide]
[su_content_slide]
[su_row][su_column size="1/2"]
<h3>YouTube video</h3>
[su_youtube url="http://www.youtube.com/watch?v=DR2c266yWEA"]
[/su_column][su_column size="1/2"]
<h3>Google map</h3>
[su_gmap]
[/su_column][/su_row]
[/su_content_slide]
[/su_content_slider]

#slider #wp #snippet

Slider – Documentation – Shortcodes Ultimate

[su_slider source="media: 1650,1648,1649" link="image" target="blank" responsive="yes" title="no" arrows="yes" pages="no" mousewheel="no"]

#slider #swiper

Swiper Slider

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>

<body>
  <!-- Swiper -->
  <div class="swiper swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination2"></div>
  </div>

  <!-- Swiper -->
  <div class="swiper swiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination3"></div>
  </div>



  <!-- Initialize Swiper -->
  <script type="module">
    import Swiper from 'swiper/swiper-bundle.esm.js';
    import 'swiper/swiper-bundle.css';
    var swiper1 = new Swiper('.swiper1', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination1',
        clickable: true,
      },
    });
    var swiper2 = new Swiper('.swiper2', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination2',
        clickable: true,
      },
    });
    var swiper3 = new Swiper('.swiper3', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination3',
        clickable: true,
      },
    });
  </script>

  <!-- Demo styles -->
  <style>
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin: 20px 0;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</body>

</html>
© 2022 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About

#slider #carousel #cards

card-carousel-colors-3D

<div class="carousel">
  <ul class="carousel__list">
    <li class="carousel__item" data-pos="-2">1</li>
    <li class="carousel__item" data-pos="-1">2</li>
    <li class="carousel__item" data-pos="0">3</li>
    <li class="carousel__item" data-pos="1">4</li>
    <li class="carousel__item" data-pos="2">5</li>
  </ul>
</div>

<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }
  html {
    height: 100vh;
  }
  body {
    height: 100vh;
  }
  .carousel {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    font-family: Arial;
  }

  .carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    justify-content: center;
    perspective: 300px;
  }
  .carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0px;
    width: 150px;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all 0.3s ease-in;
  }
  .carousel__item:nth-child(1) {
    background: linear-gradient(45deg, #2d35eb 0%, #904ed4 100%);
  }
  .carousel__item:nth-child(2) {
    background: linear-gradient(45deg, #2d35eb 0%, #fdbb2d 100%);
  }
  .carousel__item:nth-child(3) {
    background: linear-gradient(45deg, #2d35eb 0%, #22c1c3 100%);
  }
  .carousel__item:nth-child(4) {
    background: linear-gradient(45deg, #fdbb2d 0%, #904ed4 100%);
  }
  .carousel__item:nth-child(5) {
    background: linear-gradient(45deg, #22c1c3 0%, #904ed4 100%);
  }

  [data-pos="0"] {
    z-index: 5;
  }
  [data-pos="-1"],
  [data-pos="1"] {
    opacity: 0.7;
    filter: blur(1px) grayscale(10%);
  }
  [data-pos="-1"] {
    transform: translateX(-40%) scale(0.9);
    z-index: 4;
  }
  [data-pos="1"] {
    transform: translateX(40%) scale(0.9);
    z-index: 4;
  }
  [data-pos="-2"],
  [data-pos="2"] {
    opacity: 0.4;
    filter: blur(3px) grayscale(20%);
  }
  [data-pos="-2"] {
    transform: translateX(-70%) scale(0.8);
    z-index: 3;
  }
  [data-pos="2"] {
    transform: translateX(70%) scale(0.8);
    z-index: 3;
  }
</style>

<script>

  const state = {};
  const carouselList = document.querySelector('.carousel__list');
  const carouselItems = document.querySelectorAll('.carousel__item');
  const elems = Array.from(carouselItems);

  carouselList.addEventListener('click', function (event) {
    var newActive = event.target;
    var isItem = newActive.closest('.carousel__item');

    if (!isItem || newActive.classList.contains('carousel__item_active')) {
      return;
    };

    update(newActive);
  });

  const update = function(newActive) {
    const newActivePos = newActive.dataset.pos;

    const current = elems.find((elem) => elem.dataset.pos == 0);
    const prev = elems.find((elem) => elem.dataset.pos == -1);
    const next = elems.find((elem) => elem.dataset.pos == 1);
    const first = elems.find((elem) => elem.dataset.pos == -2);
    const last = elems.find((elem) => elem.dataset.pos == 2);

    current.classList.remove('carousel__item_active');

    [current, prev, next, first, last].forEach(item => {
      var itemPos = item.dataset.pos;

      item.dataset.pos = getPos(itemPos, newActivePos)
    });
  };

  const getPos = function (current, active) {
    const diff = current - active;

    if (Math.abs(current - active) > 2) {
      return -current
    }

    return diff;
</script>

#jquery #magnificpopup #slider

Magnific Popup Slider Jquery

$(document).ready(function() {
  $('.item').magnificPopup({
      type:'image',
      delegate : 'a',
      gallery : {
        enabled : true
      }
  });
});


jquery - cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Css - cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha512-+EoPw+Fiwh6eSeRK7zwIKG2MA8i3rV/DGa3tdttQGgWyatG/SkncT53KHQaS5Jh9MNOT3dmFL0FjTY08And/Cw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#javascript #splide #slider

Splide slider with modal

import Splide from '@splidejs/splide';

export default function feedSlider() {
    /**
     * get the slides
     * make an array of all the images
     * loop over the array and if one is clicked
     * then it opens up into a modal
     * when the modal is closed, then the modal is removed from the DOM
     */
    const splideElements = document.querySelectorAll('.splide');

    const splideOptions = {
        type: 'loop',
        arrows: false,
        trimSpace: false,
        perPage: 2,
        perMove: 1,
        lazyload: false,
        direction: 'ltr',
        pagination: false,
        fixedHeight: '400px',
        mediaQuery: 'min',
        snap: true,
        breakpoints: {
            0: {
                perPage: 1,
                padding: { left: '0rem', right: '30%' },
                fixedHeight: '400px',
            },
            1200: {
                perPage: 1,
                fixedHeight: '400px',
            },
        },
    };

    if (splideElements) {
        for (let i = 0; i < splideElements.length; i++) {
            new Splide(splideElements[i], splideOptions).mount();
        }
    }

    const component = [...document.querySelectorAll('.feed-carousel-wrapper')];

    function modal(imageClicked) {
        const feedImageModal = document.createElement('div');
        feedImageModal.dataset.component = 'feeback_modal';
        feedImageModal.classList.add('feedback_modal', 'open');

        feedImageModal.innerHTML = `
            <div class="feedback_modal__image-wrapper">
            <div class="feedback_modal__closeBtn" data-feedbackaction="open">
             <svg className="svg-icon svg-icon--small svg-icon--close">
               <use href="#close" />
              </svg>
            </div>
            <img src="${imageClicked ?? imageClicked}" data-image="main">
            </div>
        `;

        document.body.insertAdjacentElement('afterbegin', feedImageModal);

        const closeBtn = document.querySelector('[data-feedbackaction="open"]');
        closeBtn.addEventListener('click', () => {
            feedImageModal.remove();
        });

        feedImageModal.addEventListener('click', () => {
            feedImageModal.remove();
        });
    }

    function getParent(target, id) {
        let parent = target;
        while (parent) {
            if (parent.localName && parent.classList.contains(id)) {
                return parent;
            }
            parent = parent.parentNode;
        }
        return false;
    }

    function componentClick(e) {
        const { target } = e;
        const parentEl = getParent(target, 'splide__slide');
        if (!parentEl) return;

        const image = parentEl.querySelector('img');
        const imageUrl = image.getAttribute('src');
        modal(imageUrl);
    }

    component.forEach((template) => {
        template.addEventListener('click', componentClick);
    });
}

window.addEventListener('DOMContentLoaded', feedSlider);

#javascript #splide #slider

JS change active class if url path matches

    function dynamicVetIsNav(){
        const vetisMainNavLinks = document.querySelectorAll('#vetis-main-navigation .vet-nav__menu-link');
        const currentURL = window.location.pathname;

        const pathSegments = currentURL.split('/').filter(segment => segment !== "");
        if(vetisMainNavLinks){
            if (pathSegments.length >= 3) {
                const vetisMainURLPathname = pathSegments.slice(0, 3).join('/');
                
                for (const navLink of vetisMainNavLinks){
                    const navhref = navLink.getAttribute("href");
                    
                    if (navhref.includes(vetisMainURLPathname)) navLink.classList.add("active");
                }
            }
        }
    }
    
    document.addEventListener("DOMContentLoaded", dynamicVetIsNav);

#ios #swift #menu #slide #slidemenu #slider #slideview

slide menu

  override func viewDidLoad() {
        super.viewDidLoad()
        setSwipeGesture()
}

func setSwipeGesture() {
        let swipeRightGesture = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe(_:)))
        if AppDelegate.selectedLanguage == "en" {
            swipeRightGesture.direction = .right
        } else {
            swipeRightGesture.direction = .left
        }
              view.addGestureRecognizer(swipeRightGesture)
    }
    
    @objc func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
            if gesture.direction == .right && isOpen == false && AppDelegate.selectedLanguage == "en" {
                toggleSideMenu()
            }  else if gesture.direction == .left && isOpen == false && AppDelegate.selectedLanguage == "ar" {
                toggleSideMenu()
            }
        
     }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if isOpen && AppDelegate.selectedLanguage == "en" {
             if let touch = touches.first {
                 let location = touch.location(in: view)
                 if location.x < 50 { // Adjust the threshold as needed
                     toggleSideMenu()
                 }
             } else if isOpen && AppDelegate.selectedLanguage == "ar" {
            
                         if let touch = touches.first {
                             let location = touch.location(in: view)
                             if location.x > view.frame.size.width - 50 { // Adjust the threshold as needed
                                 toggleSideMenu()
                             }
                         }
             }
         }
     }
    
    func toggleSideMenu() {
        if AppDelegate.selectedLanguage == "en" {
            UIView.animate(withDuration: 0.15) {
                if self.isOpen {
                    self.sideMenuView.frame.origin.x = -self.sideMenuView.frame.size.width
                    self.isOpen = false
                    
                } else {
                    self.sideMenuView.frame.origin.x = 0
                    self.isOpen = true
                }
            }
        } else {
                UIView.animate(withDuration: 0.15) {
                     if self.isOpen {
                         self.sideMenuView.frame.origin.x = self.view.frame.size.width // Slide it to the right side
                         self.isOpen = false
                     } else {
                         self.sideMenuView.frame.origin.x = self.view.frame.size.width - self.sideMenuView.frame.size.width // Slide it to the left side
                         self.isOpen = true
                     }
                 }
        }
    }
    
    func shareLinkOnSocialMedia(link: URL, viewController: UIViewController) {
        let activityViewController = UIActivityViewController(activityItems: [link], applicationActivities: nil)
        activityViewController.popoverPresentationController?.sourceView = viewController.view
        viewController.present(activityViewController, animated: true, completion: nil)
    }
    
    @IBAction func menuPressed(_ sender: Any) {
        toggleSideMenu()
    }

@IBAction func backMenuButton1Pressed(_ sender: Any) {
        toggleSideMenu()
    }

#ios #swift #menu #slide #slidemenu #slider #slideview

login code

    @IBAction func loginPressed(_ sender: Any) {
        
        let email = emailTextField.text ?? ""
        let password = passwordTextField.text ?? ""
        var message = ""
        
        if email == "" {
            message = AppDelegate.selectedLanguage == "en" ? "Please enter email" : "الرجاء ادخال البريد الإلكتروني"
        } else if password == "" {
            message = AppDelegate.selectedLanguage == "en" ? "Please enter password" : "الرجاء ادخال كلمتك السريه"
        } else if !isValidEmail(email) {
            message = AppDelegate.selectedLanguage == "en" ? "please_enter_a_valid_email" : "الرجاء ادخال بريد إلكتروني صالح"
        }
        
        if message != "" {
            self.showToast(message: message)
            return
        }
        
        Auth.auth().signIn(withEmail: emailTextField.text ?? "", password: passwordTextField.text ?? "") { [weak self] authResult, error in
            if error != nil {
                let message = AppDelegate.selectedLanguage == "en" ? "Entered email or password is not correct" : "البريد الإلكتروني أو كلمة المرور المدخلة غير صحيحة"
                self?.showToast(message: message)
                return
            }
            self?.getUserData()
        }
    }

#snippet #wp #shortcode #icon

Icon – Documentation – Shortcodes Ultimate

[su_icon icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/su_icon]

#snippet #wp #shortcode

Panel – Documentation – Shortcodes Ultimate

[su_panel color="#F73F43" border="1px solid #F73F43" radius="3" text_align="center" url="#"]Panel content. You can use any <strong>HTML markup</strong> or even other shortcodes here.[/su_panel]

#snippet #column #wp

Panel – Documentation – Shortcodes Ultimate

[su_row]
[su_column size="1/3"]
[su_panel]Panel content[/su_panel]
[/su_column]
[su_column size="1/3"]
[su_panel]Panel content[/su_panel]
[/su_column]
[su_column size="1/3"]
[su_panel]Panel content[/su_panel]
[/su_column]
[/su_row]

#img #snippet #shortcode

Photo panel – Documentation – Shortcodes Ultimate

[su_photo_panel color="#F73F43" border="1px solid #F73F43" radius="3" text_align="center" photo="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-1.jpg" url="#"]This is photo panel[/su_photo_panel]

#snippet #shortcode #wp

Dropcap – Documentation – Shortcodes Ultimate

[su_dropcap style="default" size="3"]L[/su_dropcap]orem ipsum dolor sit amet, consectetur adipiscing elit. Aenean urna nisl, sodales et mauris eget, egestas ullamcorper tellus. Quisque suscipit turpis a libero ultrices, non pharetra velit ornare.

Slider – Documentation – Shortcodes Ultimate

Save snippets that work from anywhere online with our extensions

Comments

More like this

snippet

Browse more snippets >>

Slider – Documentation – Shortcodes Ultimate

Save snippets that work from anywhere online with our extensions

Comments

More like this

snippet

Browse more snippets >>

Embed code snippet