Snippets Collections
<?php
if (!defined('ABSPATH')) {
    exit;
}

class  Elementor_Slider_Custom_Widget extends \Elementor\Widget_Base
{
    public function get_name()
    {
        return 'custom_slider';
    }

    public function get_title()
    {
        return esc_html__('Custom Slider', 'elementor-list-widget');
    }

    public function get_icon()
    {
        return 'eicon-slides';
    }

    public function get_categories()
    {
        return ['custom'];
    }

    public function get_keywords()
    {
        return ['list', 'slider', 'custom', 'smo'];
    }

    protected function register_controls()
    {
        //content
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__('Content', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
        $this->add_control(
			'title_main',
			[
				'label' => esc_html__('Title', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => 'text',
			]
		);
        $this->add_control(
            'slider_list',
            [
                'label' => esc_html__('List Item', 'textdomain'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'image',
                        'label' => esc_html__('Image', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::MEDIA,
                        'media_types' => ['image', 'video'],
                        'default' => [
                            'url' => \Elementor\Utils::get_placeholder_image_src(),
                        ],
                    ],
                    [
                        'name' => 'sub_title',
                        'label' => esc_html__('Top Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
				        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'sub_title_color',
                        'label' => esc_html__('Top Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'title',
                        'label' => esc_html__('Title', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::TEXTAREA,
                        'rows' => 5,
                        'default' => '',
                    ],
                    [
                        'name' => 'title_color',
                        'label' => esc_html__('Title Color', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'default' => '#FFFFFF',
                    ],
                    [
                        'name' => 'link',
                        'label' => esc_html__('Link', 'textdomain'),
                        'type' => \Elementor\Controls_Manager::URL,
                        'options' => ['url', 'is_external', 'nofollow'],
                        'default' => [
                            'url' => '',
                            'is_external' => false,
                            'nofollow' => false,
                            'custom_attributes' => '',
                        ],
                        'label_block' => true,
                    ],
                ],
                'title_field' => '{{{ sub_title }}}',
            ]
        );
        $this->end_controls_section();


        // Setting silder PC

        $this->start_controls_section(
            'section_slider',
            [
                'label' => esc_html__('Slider PC (>1024px) ', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 471,
            ]
        );
        $this->add_control(
            'box_width',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => 353,
            ]
        );
        
        $this->add_control(
            'display_team',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.5',
            ]
        );
        $this->add_control(
            'space_between',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->add_control(
            'loop',
            [
                'label' => esc_html__('Loop', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->add_control(
            'pagination',
            [
                'label' => esc_html__('Pagination', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'no',
                'default' => '',
            ]
        );
        $this->add_control(
            'navigation',
            [
                'label' => esc_html__('Navigation', 'textdomain'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'textdomain'),
                'label_off' => esc_html__('No', 'textdomain'),
                'return_value' => 'yes',
                'default' => '',
            ]
        );
        $this->end_controls_section();

        // Setting silder tablet
        $this->start_controls_section(
            'section_slider_tl',
            [
                'label' => esc_html__('Slider Tablet (768px - 1024px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_tl',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '425',
            ]
        );
        $this->add_control(
            'box_width_tl',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '318',
            ]
        );
        
        $this->add_control(
            'display_team_tl',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '3.2',
            ]
        );
        $this->add_control(
            'space_between_tl',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();

        //Setting silder MB
        $this->start_controls_section(
            'section_slider_mb',
            [
                'label' => esc_html__('Slider Mobile (< 768px)', 'textdomain'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]

        );
        $this->add_control(
            'box_height_mb',
            [
                'label' => esc_html__('Height', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '320',
            ]
        );
        $this->add_control(
            'box_width_mb',
            [
                'label' => esc_html__('Width', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 10000,
                'step' => 1,
                'default' => '240',
            ]
        );
        
        $this->add_control(
            'display_team_mb',
            [
                'label' => esc_html__('Display', 'textdomain'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => '1.5',
            ]
        );
        $this->add_control(
            'space_between_mb',
            [
                'label' => esc_html__('Space Between', 'textdomain'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 100,
                'step' => 1,
                'default' => 14,
            ]
        );
        $this->end_controls_section();



        // Style

        $this->start_controls_section(
			'style_name',
			[
				'label' => esc_html__( 'Style Title', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .slider-title',
			]
		);
        
        $this->end_controls_section();


        $this->start_controls_section(
			'style_slider_title',
			[
				'label' => esc_html__( 'Style Slider', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);
		$this->end_controls_section();
		
		
		$this->start_controls_section(
			'style_slider_subtitle',
			[
				'label' => esc_html__( 'Style Slider Subtitle', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);
        $this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'slider_subtitle_typography',
				'selector' => '{{WRAPPER}} .sub-title',
			]
		);

		$this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $title_main = $settings['title_main'];
        
        $slider_list = $settings['slider_list'];
        $box_height = $settings['box_height'];
        $box_width = $settings['box_width'];
        $display_team = $settings['display_team'];
        $loop = $settings['loop'] === 'yes' ? 'true' : 'false';
        $navigation  = $settings['navigation'];
        $pagination = $settings['pagination'];
        $space_between = $settings['space_between'];

        $box_height_mb = $settings['box_height_mb'];
        $box_width_mb = $settings['box_width_mb'];
        $display_team_mb = $settings['display_team_mb'];
        $space_between_mb = $settings['space_between_mb'];

        $box_height_tl = $settings['box_height_tl'];
        $box_width_tl = $settings['box_width_tl'];
        $display_team_tl = $settings['display_team_tl'];
        $space_between_tl = $settings['space_between_tl'];

        // Generate a random string
        $unique_id = uniqid();
        $class_unique = 'slider-item'.$unique_id;
        ob_start();
        ?>
        <!-- PC -->
        <div class="smo-slider-section">
            <div class="smo-title-container">
                <div class="smo-title-box">
                    <?php if(!empty($title_main)): ?>
                        <h2 class="slider-title"><?php echo $title_main?></h2>
                    <?php endif; ?>
                    <?php if($navigation == "yes"):?>
                        <div class="slider-navigation">
                            <div class="navigation-next  navigation-next-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 27.2572C15.9024 26.8666 15.9024 26.2335 16.2929 25.8429L21.5858 20.55L16.2929 15.2571C15.9024 14.8666 15.9024 14.2334 16.2929 13.8429C16.6834 13.4524 17.3166 13.4524 17.7071 13.8429L23.7071 19.8429C23.8946 20.0305 24 20.2848 24 20.55C24 20.8152 23.8946 21.0696 23.7071 21.2571L17.7071 27.2572C17.3166 27.6477 16.6834 27.6477 16.2929 27.2572Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                            <div class="navigation-prev navigation-prev-<?php echo $unique_id; ?>">
                                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 13.8429C24.0976 14.2335 24.0976 14.8666 23.7071 15.2572L18.4142 20.5501L23.7071 25.8429C24.0976 26.2334 24.0976 26.8666 23.7071 27.2571C23.3166 27.6476 22.6834 27.6476 22.2929 27.2571L16.2929 21.2572C16.1054 21.0696 16 20.8153 16 20.5501C16 20.2848 16.1054 20.0305 16.2929 19.843L22.2929 13.8429C22.6834 13.4524 23.3166 13.4524 23.7071 13.8429Z" fill="#080808" fill-opacity="0.8"/>
                                </svg>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="smo-slider-container">
                <div class="smo-slider smo-slider-<?php echo $unique_id; ?> swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($slider_list as $key => $team):
                            $image = $team['image']['url'];
                            $title = $team['title'];
                            $title_color = $team['title_color'];
                            $sub_title = $team['sub_title'];
                            $sub_title_color = $team['sub_title_color'];
                            $link = $team['link'];
                            $tags = !empty($link['url'])?'a':'div';
                            $href = !empty($link['url'])?'href="'.$link['url'].'"':'';
                            $target = !empty($link['url']) && $link['is_external'] ? 'target="_blank"' : '';
                            $nofollow = !empty($link['url']) && $link['nofollow'] ? 'rel="nofollow"' : '';

                            $is_video = preg_match('/\.(mp4|webm|ogg)$/i', $image);
                            ?>
                            <div class="swiper-slide slider-item <?php echo $class_unique ?>">
                                <<?php echo $tags ?> class="item-box" style="background: url(<?php echo (!$is_video)?esc_url($image):'' ?>) center/cover no-repeat;" <?php echo $href ?> <?php echo $target ?> <?php echo $nofollow ?>>
                                    <?php if ($is_video): ?>
                                        <video class="background-media" autoplay loop muted playsinline>
                                            <source src="<?php echo esc_url($image) ?>" type="video/mp4">
                                        </video>
                                    <?php endif; ?>
                                    <div class="slider-infor">
                                        <?php if(!empty($sub_title)): ?>
                                            <p class="sub-title" style="color: <?php echo $sub_title_color ?>">
                                                <?php echo $sub_title ?>
                                            </p>
                                        <?php endif; ?>

                                        <?php if(!empty($title)): ?>
                                        <h3 class="title" style="color: <?php echo $title_color ?>">
                                            <?php echo $title ?>
                                        </h3>
                                        <?php endif; ?>
                                        
                                    </div>
                                </<?php echo $tags ?>>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <?php if($pagination == "yes"):?>
                        <div class="swiper-pagination slider-pagination"></div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <style>
            .smo-slider-section <?php echo '.'.$class_unique ?>{
                aspect-ratio: <?php echo $box_width?>/<?php echo $box_height?>;
                max-width: <?php echo $box_width?>px;
            }
            @media(max-width: 1024px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_tl?>/<?php echo $box_height_tl?>;
                    max-width: <?php echo $box_width_tl?>px;
                }
            }
            @media(max-width: 767px){
                .smo-slider-section <?php echo '.'.$class_unique ?>{
                    aspect-ratio: <?php echo $box_width_mb?>/<?php echo $box_height_mb?>;
					max-width: <?php echo $box_width_mb?>px;
                }
            }
        </style>

        <script>
            (function ($) {
                $(document).ready(function () {
                    var swiper = new Swiper(".smo-slider-<?php echo $unique_id; ?>", {
                        slidesPerView: <?php echo $display_team; ?>,
                        spaceBetween: <?php echo $space_between; ?>,
                        loop: <?php echo $loop; ?>,
                        centeredSlides: false,
						speed: 600,
                        breakpoints: {
                            0: {
                                slidesPerView: <?php echo $display_team_mb; ?>,
                                spaceBetween: <?php echo $space_between_mb; ?>,
                            },
                            768: {
                                slidesPerView: <?php echo $display_team_tl; ?>,
                                spaceBetween: <?php echo $space_between_tl; ?>,
                            },
                            1025: {
                                slidesPerView: <?php echo $display_team; ?>,
                                spaceBetween: <?php echo $space_between; ?>,
                            }
                        },
                        pagination: {
                            el: ".slider-pagination",
                        },
                        navigation: {
                            nextEl: ".navigation-next-<?php echo $unique_id; ?>",
                            prevEl: ".navigation-prev-<?php echo $unique_id; ?>",
                        },
// 						direction: 'horizontal',
// 						mousewheel: true,
// 						effect: 'slide'
                    });
                });
            })(jQuery)
        </script>
        <?php
        echo ob_get_clean();
    }
}


    @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()
        }
    }
  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()
    }
    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);
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);
$(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" />
<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>
<!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
[su_slider source="media: 1650,1648,1649" link="image" target="blank" responsive="yes" title="no" arrows="yes" pages="no" mousewheel="no"]
<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]
// 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();
  }
});
star

Sat Mar 29 2025 02:31:22 GMT+0000 (Coordinated Universal Time)

#elementor #custom #widget #slider
star

Mon Oct 09 2023 10:47:40 GMT+0000 (Coordinated Universal Time)

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

Mon Oct 09 2023 07:52:02 GMT+0000 (Coordinated Universal Time)

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

Wed Aug 23 2023 04:37:24 GMT+0000 (Coordinated Universal Time)

#javascript #splide #slider
star

Mon Aug 07 2023 22:37:52 GMT+0000 (Coordinated Universal Time)

#javascript #splide #slider
star

Mon Jan 30 2023 04:58:38 GMT+0000 (Coordinated Universal Time) https://dimsemenov.com/plugins/magnific-popup/documentation.html

#jquery #magnificpopup #slider
star

Wed May 25 2022 12:33:13 GMT+0000 (Coordinated Universal Time) https://codepen.io/frise/pen/mZvKpe

#slider #carousel #cards
star

Sun May 08 2022 09:30:28 GMT+0000 (Coordinated Universal Time)

#slider #swiper
star

Sat Jan 08 2022 08:25:56 GMT+0000 (Coordinated Universal Time) https://getshortcodes.com/docs/slider/

#slider #wp #snippet
star

Sat Jan 08 2022 08:03:22 GMT+0000 (Coordinated Universal Time) https://getshortcodes.com/docs/content-slider/

#snippet #wp #shortcode #slider
star

Sat Oct 10 2020 02:55:49 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/29901228/add-autoplay-for-video-in-slick-carousel

#video #slider #slick

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension