WordPress.org
Get WordPress

Plugin Directory

Changeset 3417895


Ignore:
Timestamp:
12/12/2025 05:14:21 AM (2 months ago)
Author:
wpcoder75
Message:

### = 2.3.0 [12th December 2025] =

  • Added: Vertical scrolling option to Marquee Slider widget — now supports both horizontal and vertical scroll directions.
  • Added: Vertical direction control (up/down) for vertical marquee animations.
  • Added: Vertical height control for customizing container height in vertical mode.
  • Enhanced: Marquee Slider edge masking now works for both horizontal and vertical scrolling.
  • Improved: Animation performance and responsiveness for vertical scrolling mode.
  • Updated: JavaScript animation engine to support dynamic axis switching and direction control.
Location:
daily-slider
Files:
40 added
7 edited

Legend:

Unmodified
Added
Removed

  • daily-slider/trunk/admin/widget-manager.php

    r3412300 r3417895  
    5858        self::add_widget('marquee', [
    5959            'name' => __('Marquee Slider', 'daily-slider'),
    60             'description' => __('Smooth scrolling marquee for logos, testimonials, and continuous content loops.', 'daily-slider'),
     60            'description' => __('Smooth scrolling marquee for logos, testimonials, and continuous content loops with horizontal and vertical scrolling options.', 'daily-slider'),
    6161            'icon' => 'dashicons-editor-code',
    6262            'category' => 'current',
    6363            'status' => 'active',
    6464            'features' => [
     65                __('Horizontal & vertical scrolling', 'daily-slider'),
    6566                __('Continuous scrolling', 'daily-slider'),
    6667                __('Logo showcase', 'daily-slider'),
    67                 __('Speed control', 'daily-slider')
     68                __('Speed control', 'daily-slider'),
     69                __('Pause on hover', 'daily-slider'),
     70                __('Edge masking effects', 'daily-slider')
    6871            ]
    6972        ]);

  • daily-slider/trunk/assets/css/widgets/marquee.css

    r3351312 r3417895  
    66  overflow: hidden;
    77  position: relative;
     8}
     9
     10/* Vertical Scroll Container */
     11.daily-slider-marquee-slider.vertical-scroll {
     12  height: 300px; /* Default height */
     13  width: 100%;
    814}
    915
    … …  
    2531}
    2632
     33.daily-slider-marquee-mask-yes .daily-slider-marquee-slider.vertical-scroll {
     34  mask-image: linear-gradient(
     35    to bottom,
     36    transparent,
     37    #000 var(--mask-smoothness),
     38    #000 calc(100% - var(--mask-smoothness)),
     39    transparent
     40  );
     41  -webkit-mask-image: linear-gradient(
     42    to bottom,
     43    transparent,
     44    #000 var(--mask-smoothness),
     45    #000 calc(100% - var(--mask-smoothness)),
     46    transparent
     47  );
     48}
     49
    2750/* Track */
    2851.daily-slider-marquee-slider .daily-slider-marquee-slider__track {
    … …  
    3760}
    3861
     62/* Vertical Track */
     63.daily-slider-marquee-slider.vertical-scroll
     64  .daily-slider-marquee-slider__track {
     65  flex-direction: column;
     66  height: 100%;
     67  white-space: normal;
     68}
     69
    3970/* Content */
    4071.daily-slider-marquee-slider .daily-slider-marquee-slider__content {
    … …  
    4273  gap: var(--item-gap, 12px);
    4374  flex-shrink: 0;
     75}
     76
     77/* Vertical Content */
     78.daily-slider-marquee-slider.vertical-scroll
     79  .daily-slider-marquee-slider__content {
     80  flex-direction: column;
     81  display: flex;
     82  height: auto;
     83  white-space: normal;
    4484}
    4585
    … …  
    5191  transition: all 0.3s ease;
    5292  white-space: nowrap;
     93}
     94
     95/* Vertical Items */
     96.daily-slider-marquee-slider.vertical-scroll
     97  .daily-slider-marquee-slider__item-box {
     98  display: flex;
     99  white-space: normal;
     100  width: 100%;
     101  justify-content: flex-start;
    53102}
    54103

  • daily-slider/trunk/assets/js/widgets/marquee.js

    r3351312 r3417895  
    55    constructor(element) {
    66      this.widget = element;
    7      
     7
    88      try {
    9         this.settings = JSON.parse(this.widget.dataset.settings || '{}');
     9        this.settings = JSON.parse(this.widget.dataset.settings || "{}");
    1010      } catch (error) {
    11         console.error('Failed to parse marquee settings:', error);
     11        console.error("Failed to parse marquee settings:", error);
    1212        this.settings = {
    13           direction: 'left',
     13          direction: "left",
    1414          speed: 30,
    15           pauseOnHover: true
     15          pauseOnHover: true,
     16          scrollAxis: "horizontal",
    1617        };
    1718      }
    18      
     19
    1920      this.track = element.querySelector(".daily-slider-marquee-slider__track");
    20       this.content = element.querySelector(".daily-slider-marquee-slider__content");
    21      
     21      this.content = element.querySelector(
     22        ".daily-slider-marquee-slider__content"
     23      );
     24
    2225      if (!this.track || !this.content) {
    23         console.error('Marquee elements not found');
     26        console.error("Marquee elements not found");
    2427        return;
    2528      }
    26      
     29
    2730      this.isInitialized = false;
    28       this.uniqueId = "daily-slider-marquee-" + Math.random().toString(36).substr(2, 9);
     31      this.uniqueId =
     32        "daily-slider-marquee-" + Math.random().toString(36).substr(2, 9);
    2933      this.widget.setAttribute("data-marquee-id", this.uniqueId);
    3034
    … …  
    3842    }
    3943
    40     calculateDuration(contentWidth) {
     44    calculateDuration(contentSize) {
    4145      // Base speed is pixels per second (adjust this value to control the base speed)
    4246      const baseSpeed = 100; // pixels per second
    43       // Calculate duration based on content width and desired speed
    44       const duration = contentWidth / baseSpeed;
     47      // Calculate duration based on content size and desired speed
     48      const duration = contentSize / baseSpeed;
    4549      // Use the user's speed setting as a multiplier (higher number = slower)
    4650      return duration * (this.settings.speed / 30);
    … …  
    5761
    5862    initMarquee() {
    59       // Calculate content width
    60       const contentWidth = this.content.offsetWidth;
    61       const duration = this.calculateDuration(contentWidth);
     63      // Calculate content size based on scroll axis
     64      const isVertical = this.settings.scrollAxis === "vertical";
     65      const contentSize = isVertical
     66        ? this.content.offsetHeight
     67        : this.content.offsetWidth;
     68      const duration = this.calculateDuration(contentSize);
    6269
    6370      // Create single clone for smooth animation
    … …  
    6875      // Add animation styles
    6976      const style = document.createElement("style");
    70       const direction =
    71         this.settings.direction === "right" ? "translateX" : "translateX(-";
    72       const startPosition =
    73         this.settings.direction === "right" ? `-${contentWidth}px` : "0";
    74       const endPosition =
    75         this.settings.direction === "right" ? "0" : `-${contentWidth}px`;
     77
     78      let startPosition, endPosition;
     79
     80      if (isVertical) {
     81        // Vertical animation
     82        if (this.settings.direction === "down") {
     83          startPosition = `-${contentSize}px`;
     84          endPosition = "0";
     85        } else {
     86          startPosition = "0";
     87          endPosition = `-${contentSize}px`;
     88        }
     89      } else {
     90        // Horizontal animation (existing)
     91        if (this.settings.direction === "right") {
     92          startPosition = `-${contentSize}px`;
     93          endPosition = "0";
     94        } else {
     95          startPosition = "0";
     96          endPosition = `-${contentSize}px`;
     97        }
     98      }
     99
     100      const transformProperty = isVertical ? "translateY" : "translateX";
    76101
    77102      style.textContent = `
    78                 [data-marquee-id="${this.uniqueId}"] .daily-slider-marquee-slider__track {
     103                [data-marquee-id="${
     104                  this.uniqueId
     105                }"] .daily-slider-marquee-slider__track {
    79106                    display: flex;
    80                     animation: daily-slider-marquee-${this.uniqueId} ${duration}s linear infinite;
     107                    ${isVertical ? "flex-direction: column;" : ""}
     108                    animation: daily-slider-marquee-${
     109                      this.uniqueId
     110                    } ${duration}s linear infinite;
    81111                    animation-play-state: running;
    82112                }
    83113                @keyframes daily-slider-marquee-${this.uniqueId} {
    84                     from { transform: translateX(${startPosition}); }
    85                     to { transform: translateX(${endPosition}); }
     114                    from { transform: ${transformProperty}(${startPosition}); }
     115                    to { transform: ${transformProperty}(${endPosition}); }
    86116                }
    87                 [data-marquee-id="${this.uniqueId}"] .daily-slider-marquee-slider__content {
     117                [data-marquee-id="${
     118                  this.uniqueId
     119                }"] .daily-slider-marquee-slider__content {
    88120                    flex-shrink: 0;
    89121                    display: flex;
     122                    ${isVertical ? "flex-direction: column;" : ""}
    90123                    align-items: center;
    91124                    gap: var(--content-gap, 1rem);
    … …  
    118151        clearTimeout(resizeTimeout);
    119152        resizeTimeout = setTimeout(() => {
    120           const newContentWidth = this.content.offsetWidth;
    121           const newDuration = this.calculateDuration(newContentWidth);
    122           const newStartPosition =
    123             this.settings.direction === "right" ? `-${newContentWidth}px` : "0";
    124           const newEndPosition =
    125             this.settings.direction === "right" ? "0" : `-${newContentWidth}px`;
     153          const isVertical = this.settings.scrollAxis === "vertical";
     154          const newContentSize = isVertical
     155            ? this.content.offsetHeight
     156            : this.content.offsetWidth;
     157          const newDuration = this.calculateDuration(newContentSize);
     158
     159          let newStartPosition, newEndPosition;
     160
     161          if (isVertical) {
     162            if (this.settings.direction === "down") {
     163              newStartPosition = `-${newContentSize}px`;
     164              newEndPosition = "0";
     165            } else {
     166              newStartPosition = "0";
     167              newEndPosition = `-${newContentSize}px`;
     168            }
     169          } else {
     170            if (this.settings.direction === "right") {
     171              newStartPosition = `-${newContentSize}px`;
     172              newEndPosition = "0";
     173            } else {
     174              newStartPosition = "0";
     175              newEndPosition = `-${newContentSize}px`;
     176            }
     177          }
     178
     179          const transformProperty = isVertical ? "translateY" : "translateX";
    126180
    127181          // Update animation duration
    … …  
    130184          const newKeyframes = `
    131185                        @keyframes daily-slider-marquee-${this.uniqueId} {
    132                             from { transform: translateX(${newStartPosition}); }
    133                             to { transform: translateX(${newEndPosition}); }
     186                            from { transform: ${transformProperty}(${newStartPosition}); }
     187                            to { transform: ${transformProperty}(${newEndPosition}); }
    134188                        }
    135189                    `;
    … …  
    150204      return;
    151205    }
    152    
     206
    153207    try {
    154208      new widgetDailySlider($marqueeWidget[0]);
    155209    } catch (error) {
    156       console.error('Marquee Slider Error:', error);
     210      console.error("Marquee Slider Error:", error);
    157211    }
    158212  };
    159213
    160214  // Initialize in Elementor editor
    161   if (typeof elementorFrontend !== 'undefined' && elementorFrontend.isEditMode()) {
     215  if (
     216    typeof elementorFrontend !== "undefined" &&
     217    elementorFrontend.isEditMode()
     218  ) {
    162219    // Make sure hooks are available before trying to use them
    163220    if (elementorFrontend.hooks) {
    … …  
    166223        MarqueeHandler
    167224      );
    168      
     225
    169226      // Also initialize for widgets already in the DOM
    170       $(document).ready(function() {
    171         $(".elementor-widget-daily-slider-marquee").each(function() {
     227      $(document).ready(function () {
     228        $(".elementor-widget-daily-slider-marquee").each(function () {
    172229          MarqueeHandler($(this), $);
    173230        });
    … …  
    175232    } else {
    176233      // If hooks aren't available yet, wait for them
    177       $(window).on("elementor/frontend/init", function() {
     234      $(window).on("elementor/frontend/init", function () {
    178235        elementorFrontend.hooks.addAction(
    179236          "frontend/element_ready/daily-slider-marquee.default",
    … …  
    191248    );
    192249  });
    193  
     250
    194251  // Fallback initialization for non-Elementor themes
    195   $(document).ready(function() {
     252  $(document).ready(function () {
    196253    // Only run this if we're not in Elementor
    197     if (typeof elementorFrontend === 'undefined' || !elementorFrontend.isEditMode()) {
    198       $(".daily-slider-marquee-slider").each(function() {
     254    if (
     255      typeof elementorFrontend === "undefined" ||
     256      !elementorFrontend.isEditMode()
     257    ) {
     258      $(".daily-slider-marquee-slider").each(function () {
    199259        try {
    200260          new widgetDailySlider(this);
    201261        } catch (error) {
    202           console.error('Marquee Slider Error:', error);
     262          console.error("Marquee Slider Error:", error);
    203263        }
    204264      });

  • daily-slider/trunk/daily-slider.php

    r3412300 r3417895  
    33 * Plugin Name: Daily Slider
    44 * Description: Enhance Elementor with customizable hero sliders, review carousels, and portfolio showcases, featuring responsive design, animations, and hover effects.
    5  * Version: 2.2.0
     5 * Version: 2.3.0
    66 * Author: wpcoder75
    77 * Author URI: https://github.com/asikwp75
    … …  
    1919
    2020class DailySliderPlugin {
    21     const VERSION = '2.2.0';
     21    const VERSION = '2.3.0';
    2222    const MINIMUM_ELEMENTOR_VERSION = '3.26.0';
    2323    const MINIMUM_PHP_VERSION = '7.4';

  • daily-slider/trunk/readme.txt

    r3412300 r3417895  
    11=== Daily Slider - Addons for Elementor ===
    22Contributors: wpcoder75
    3 Tags: elementor, slider, carousel, marquee, hero-slider
     3Tags: elementor addons, content slider, image slider, marquee, layer Slider
    44Requires at least: 5.0
    5 Tested up to: 6.8
    6 Stable Tag: 2.2.0
     5Tested up to: 6.9
     6Stable Tag: 2.3.0
    77Requires PHP: 7.4
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    1010
    11 Powerful Elementor addon with customizable hero sliders, review carousels, and portfolio showcases featuring responsive design and smooth animations.
     11Professional Elementor slider addon with hero sliders, testimonial carousels, image galleries, and animated marquee widgets. Mobile-responsive with advanced customization options.
    1212
    1313== Description ==
    1414
    15 DailySlider is a powerful Elementor addon that adds feature-rich slider and carousel widgets to create stunning hero sections, testimonials, and portfolios with ease.
     15**Daily Slider** is the ultimate WordPress slider plugin for Elementor page builder that transforms your website with stunning visual elements. Create professional hero sections, testimonial carousels, portfolio galleries, and animated marquee displays with zero coding required.
    1616
    17 **DailySlider** is a versatile Elementor addon plugin that allows you to create stunning sliders, carousels, and showcases on your website. Whether you're looking to add a hero section, a testimonial carousel, or a portfolio gallery, DailySlider offers a set of highly customizable and responsive widgets that integrate seamlessly with Elementor. Enhance your website's visual appeal with smooth animations and engaging hover effects for a dynamic user experience.
     17**Perfect for WordPress developers, designers, and business owners** who want to build engaging websites that convert visitors into customers. Our slider widgets are mobile-first, SEO-optimized, and performance-focused to ensure fast loading times across all devices.
     18
     19### Why Choose Daily Slider?
     20
     21**4 Premium Slider Widgets** - Hero sliders, testimonial carousels, image galleries, and marquee animations
     22**Mobile-First Design** - Fully responsive on desktop, tablet, and mobile devices 
     23**Performance Optimized** - Fast loading with conditional asset loading
     24**SEO Friendly** - Clean HTML markup and semantic structure
     25**Easy Customization** - Visual controls for colors, typography, spacing, and animations
     26**Professional Templates** - Ready-to-use designs for quick implementation
     27**Regular Updates** - Compatible with latest WordPress and Elementor versions
    1828
    1929
    2030
    21 ### Key Features:
    22 - **Fully responsive design** ensuring your sliders look great on all devices (desktop, tablet, mobile)
    23 - **Pixel Widget (Hero Slider)**: Create full-screen, attention-grabbing hero sliders perfect for showcasing high-quality images.
    24 - **Review Carousel Widget (Testimonial Carousel)**: Display customer reviews and testimonials in an interactive carousel format.
    25 - **Eldorado Widget (Image Carousel)**: Showcase portfolio items or images in a stylish and sleek carousel layout.
    26 - **Marquee Slider Widget**: Create smooth scrolling marquee effects for displaying logos, testimonials, or any content in a continuous loop.
    27 - **Customization options** for text, images, spacing, colors, and typography.
    28 - **Seamless integration with Elementor's drag-and-drop editor** for easy design.
     31### Complete Slider Solution for WordPress:
    2932
    30 This plugin is perfect for creating stunning sliders that elevate your website's aesthetic and functionality with minimal effort.
     33**Pixel Hero Slider** - Create stunning full-screen hero sections with parallax effects, custom animations, and call-to-action buttons. Perfect for landing pages and homepage headers.
    3134
    32 == Widgets ==
     35**Review Carousel Widget** - Showcase customer testimonials and reviews with star ratings, author photos, and social proof elements to boost conversions and build trust.
    3336
    34 - **Pixel (Hero Slider)**
    35   - A full-screen hero slider widget designed to display your most important content in an eye-catching manner.
    36   - Ideal for showcasing high-quality images or videos with smooth animations.
     37**Eldorado Image Gallery** - Display portfolio projects, product galleries, and photography collections with hover effects, lightbox integration, and grid layouts.
    3738
    38 - **Review Carousel (Testimonial Carousel)**
    39   - Display customer testimonials in a dynamic carousel layout.
    40   - Helps you highlight positive reviews and build trust with potential customers.
     39**Marquee Slider Widget** - Create eye-catching scrolling animations for logos, announcements, news tickers, and promotional content with horizontal and vertical scrolling options.
    4140
    42 - **Eldorado (Image Carousel)**
    43   - An elegant image carousel widget designed for portfolio showcases, photography galleries, or any image-based content.
     41**Advanced Customization** - Visual style controls for typography, colors, spacing, borders, shadows, and responsive breakpoints without touching code.
    4442
    45 - **Marquee Slider**
    46   - A smooth scrolling marquee widget perfect for displaying logos, testimonials, announcements, or any content in a continuous loop.
    47   - Features customizable speed, direction, pause on hover, and edge masking effects.
     43**Performance Features** - Conditional asset loading, lazy loading images, optimized animations, and minimal CSS/JS footprint for faster page speeds.
     44
     45### Perfect for:
     46- **Business Websites** - Showcase services, testimonials, and company achievements
     47- **Portfolio Sites** - Display creative work, projects, and case studies 
     48- **E-commerce Stores** - Feature products, customer reviews, and promotional banners
     49- **Agencies & Freelancers** - Create client presentations and service showcases
     50- **Blogs & Media** - Highlight featured content and author testimonials
     51
     52**Get started in minutes** with our intuitive drag-and-drop interface and transform your WordPress website into a conversion-focused, professional online presence.
     53
     54== Premium Slider Widgets ==
     55
     56**Pixel Hero Slider**
     57- Full-screen responsive hero sections with parallax scrolling effects
     58- Custom call-to-action buttons with conversion tracking
     59- Background video support and image optimization
     60- Perfect for landing pages, homepages, and sales pages
     61
     62**Review & Testimonial Carousel** 
     63- Customer testimonial slider with star ratings and photos
     64- Social proof widgets to increase trust and conversions
     65- Schema markup for SEO benefits and rich snippets
     66- Ideal for service businesses and e-commerce stores
     67
     68**Eldorado Image Gallery**
     69- Portfolio and product image carousels with lightbox
     70- Masonry grid layouts and hover animation effects 
     71- Category filtering and lazy loading for performance
     72- Great for photographers, designers, and online stores
     73
     74**Marquee Slider (NEW)**
     75- Horizontal and vertical scrolling text/logo animations
     76- News ticker, brand showcase, and announcement bars
     77- Customizable speed, direction, and pause-on-hover features
     78- Perfect for promotions, partnerships, and dynamic content
    4879
    4980== Installation ==
    … …  
    5687== Frequently Asked Questions ==
    5788
    58 = Can I use these widgets on mobile devices? =
    59 Yes, all widgets are **fully responsive** and optimized for mobile, tablet, and desktop devices. You can customize how they look on each device for a seamless experience.
     89= Is Daily Slider compatible with all WordPress themes? =
     90Yes! Daily Slider works with any WordPress theme that supports Elementor page builder. Our widgets are designed to seamlessly integrate with your existing design.
    6091
    61 = Does this plugin require Elementor? =
    62 Yes, this plugin is an **Elementor extension** and works only with the **Elementor page builder**. Make sure Elementor is installed and activated before using this plugin.
     92= Can I use these slider widgets on mobile devices? =
     93Absolutely! All slider widgets are **mobile-first responsive** and optimized for desktop, tablet, and mobile devices. You can customize layouts for each device breakpoint.
    6394
    64 = Can I customize the animations and effects? =
    65 Yes, the plugin provides options to customize **animations**, **hover effects**, and **transitions** for all widgets, allowing you to create unique and interactive content.
     95= Does this plugin require Elementor Pro? =
     96No, Daily Slider works with the free version of Elementor. However, you need **Elementor page builder** installed and activated to use our slider widgets.
     97
     98= Will these sliders slow down my website? =
     99No! Our sliders are performance-optimized with conditional asset loading, meaning only the CSS/JS for active widgets will load. This ensures fast page speeds and better SEO rankings.
     100
     101= Can I customize the slider animations and effects? =
     102Yes! The plugin provides extensive customization options including **animations**, **hover effects**, **transitions**, **colors**, **typography**, and **responsive settings** - all through Elementor's visual interface.
     103
     104= Do you provide customer support? =
     105Yes! We provide comprehensive documentation and support for all Daily Slider features. Check our GitHub repository for updates and community support.
    66106
    67107
    … …  
    69109
    70110== Changelog ==
     111
     112### = 2.3.0 [12th December 2025] =
     113
     114* Added: Vertical scrolling option to Marquee Slider widget — now supports both horizontal and vertical scroll directions.
     115* Added: Vertical direction control (up/down) for vertical marquee animations.
     116* Added: Vertical height control for customizing container height in vertical mode.
     117* Enhanced: Marquee Slider edge masking now works for both horizontal and vertical scrolling.
     118* Improved: Animation performance and responsiveness for vertical scrolling mode.
     119* Updated: JavaScript animation engine to support dynamic axis switching and direction control.
    71120
    72121### = 2.2.0 [5th December 2025] =

  • daily-slider/trunk/widgets/marquee/marquee.php

    r3345410 r3417895  
    7373
    7474        $this->add_control(
     75            'show_title',
     76            [
     77                'label' => __('Show Title', 'daily-slider'),
     78                'type' => Controls_Manager::SWITCHER,
     79                'label_on' => __('Show', 'daily-slider'),
     80                'label_off' => __('Hide', 'daily-slider'),
     81                'return_value' => 'yes',
     82                'default' => 'yes',
     83            ]
     84        );
     85
     86        $this->add_control(
    7587            'marquee_item_direction',
    7688            [
    … …  
    229241
    230242        $this->add_control(
     243            'scroll_axis',
     244            [
     245                'label' => __('Scroll Axis', 'daily-slider'),
     246                'type' => Controls_Manager::CHOOSE,
     247                'default' => 'horizontal',
     248                'options' => [
     249                    'horizontal' => [
     250                        'title' => __('Horizontal', 'daily-slider'),
     251                        'icon' => 'eicon-navigation-horizontal',
     252                    ],
     253                    'vertical' => [
     254                        'title' => __('Vertical', 'daily-slider'),
     255                        'icon' => 'eicon-navigation-vertical',
     256                    ],
     257                ],
     258                'toggle' => false,
     259            ]
     260        );
     261
     262        $this->add_control(
    231263            'pause_on_hover',
    232264            [
    … …  
    257289                ],
    258290                'toggle' => false,
     291                'condition' => [
     292                    'scroll_axis' => 'horizontal',
     293                ],
     294            ]
     295        );
     296
     297        $this->add_control(
     298            'vertical_direction',
     299            [
     300                'label' => __('Vertical Direction', 'daily-slider'),
     301                'type' => Controls_Manager::CHOOSE,
     302                'default' => 'up',
     303                'options' => [
     304                    'up' => [
     305                        'title' => __('Up', 'daily-slider'),
     306                        'icon' => 'eicon-v-align-top',
     307                    ],
     308                    'down' => [
     309                        'title' => __('Down', 'daily-slider'),
     310                        'icon' => 'eicon-v-align-bottom',
     311                    ],
     312                ],
     313                'toggle' => false,
     314                'condition' => [
     315                    'scroll_axis' => 'vertical',
     316                ],
    259317            ]
    260318        );
    … …  
    294352                    'size' => 50,
    295353                ],
    296                 'selectors' => [
    297                     '{{WRAPPER}} .daily-slider-marquee-slider__content' => 'gap: {{SIZE}}{{UNIT}};',
    298                     '{{WRAPPER}} .daily-slider-marquee-slider__track' => 'gap: {{SIZE}}{{UNIT}};',
    299                 ],
    300                 'separator' => 'before',
     354            'selectors' => [
     355                '{{WRAPPER}} .daily-slider-marquee-slider__content' => 'gap: {{SIZE}}{{UNIT}};',
     356                '{{WRAPPER}} .daily-slider-marquee-slider__track' => 'gap: {{SIZE}}{{UNIT}};',
     357            ],
     358            'separator' => 'before',
     359            ]
     360        );
     361
     362        $this->add_responsive_control(
     363            'vertical_height',
     364            [
     365                'label' => esc_html__('Vertical Height', 'daily-slider'),
     366                'type' => Controls_Manager::SLIDER,
     367                'size_units' => ['px', 'vh'],
     368                'range' => [
     369                    'px' => [
     370                        'min' => 100,
     371                        'max' => 1000,
     372                    ],
     373                    'vh' => [
     374                        'min' => 10,
     375                        'max' => 100,
     376                    ],
     377                ],
     378                'default' => [
     379                    'size' => 300,
     380                    'unit' => 'px',
     381                ],
     382                'selectors' => [
     383                    '{{WRAPPER}} .daily-slider-marquee-slider.vertical-scroll' => 'height: {{SIZE}}{{UNIT}};',
     384                ],
     385                'condition' => [
     386                    'scroll_axis' => 'vertical',
     387                ],
    301388            ]
    302389        );
    … …  
    490577                'label' => __('Title', 'daily-slider'),
    491578                'tab' => Controls_Manager::TAB_STYLE,
     579                'condition' => [
     580                    'show_title' => 'yes',
     581                ],
    492582            ]
    493583        );
    … …  
    9101000            }
    9111001        }
    912         $this->render_title($item['title']);
     1002       
     1003        if ($settings['show_title'] === 'yes') {
     1004            $this->render_title($item['title']);
     1005        }
    9131006    }
    9141007
    … …  
    9281021        }
    9291022
     1023        $scroll_axis = $settings['scroll_axis'] ?? 'horizontal';
     1024        $marquee_classes = ['daily-slider-marquee-slider'];
     1025       
     1026        if ($scroll_axis === 'vertical') {
     1027            $marquee_classes[] = 'vertical-scroll';
     1028        }
     1029       
    9301030        $this->add_render_attribute('marquee-slider', [
    931             'class' => 'daily-slider-marquee-slider',
     1031            'class' => $marquee_classes,
    9321032            'data-settings' => wp_json_encode([
    933                 'direction' => $settings['marquee_direction'],
     1033                'direction' => $scroll_axis === 'vertical' ? ($settings['vertical_direction'] ?? 'up') : $settings['marquee_direction'],
    9341034                'speed' => absint($settings['marquee_speed']['size']),
    935                 'pauseOnHover' => $settings['pause_on_hover'] === 'yes'
     1035                'pauseOnHover' => $settings['pause_on_hover'] === 'yes',
     1036                'scrollAxis' => $scroll_axis
    9361037            ])
    9371038        ]);
Note: See TracChangeset for help on using the changeset viewer.