marquee-2.php
92 lines
| 1 | <?php |
| 2 | if ( ! defined( 'ABSPATH' ) ) { |
| 3 | exit; // Exit if accessed directly. |
| 4 | } |
| 5 | ?> |
| 6 | <section class="promo_area"> |
| 7 | <div class="marquee"> |
| 8 | <?php |
| 9 | if ( ! empty ( $brand_names ) ) { |
| 10 | foreach ( $brand_names as $item ) { |
| 11 | ?> |
| 12 | <div class="slide"> |
| 13 | <h2 class="se_marquee_title"> |
| 14 | <?php spel_dynamic_image( $settings['shape_img'] ); ?> |
| 15 | <?php echo esc_html( $item['title'] ); ?> |
| 16 | </h2> |
| 17 | </div> |
| 18 | <?php |
| 19 | } |
| 20 | } |
| 21 | ?> |
| 22 | </div> |
| 23 | </section> |
| 24 | |
| 25 | |
| 26 | <script> |
| 27 | ;(function ($) { |
| 28 | "use strict"; |
| 29 | $(document).ready(function () { |
| 30 | if ($(".marquee").length) { |
| 31 | var Increment = 1; // Amount to move per tick... |
| 32 | var LoopDelay = 500 / 30; // How fast ticks happen... |
| 33 | var Loop; |
| 34 | |
| 35 | function DestroyLoop() { |
| 36 | clearInterval(Loop); |
| 37 | } |
| 38 | |
| 39 | function CreateLoop() { |
| 40 | Loop = setInterval(function () { |
| 41 | var FirstSlide = $(".marquee .slide:first-child"); |
| 42 | var FirstMargin = parseInt(FirstSlide.css("margin-left")) - Increment; |
| 43 | FirstSlide.css({"margin-left": FirstMargin}); |
| 44 | |
| 45 | if (Math.abs(FirstMargin) >= FirstSlide.outerWidth()) { |
| 46 | FirstSlide.css({"margin-left": 0}); |
| 47 | FirstSlide.appendTo($(".marquee")); |
| 48 | } |
| 49 | }, LoopDelay); |
| 50 | } |
| 51 | |
| 52 | $(".marquee").on("mouseenter", DestroyLoop); |
| 53 | $(".marquee").on("mouseleave", CreateLoop); |
| 54 | CreateLoop(); |
| 55 | } |
| 56 | }); |
| 57 | })(jQuery) |
| 58 | </script> |
| 59 | |
| 60 | <style> |
| 61 | .marquee { |
| 62 | width: 100%; |
| 63 | display: inline-block; |
| 64 | white-space: nowrap; |
| 65 | overflow: hidden; |
| 66 | } |
| 67 | |
| 68 | .marquee .slide { |
| 69 | width: auto; |
| 70 | display: inline-block; |
| 71 | padding: 1rem; |
| 72 | } |
| 73 | |
| 74 | .marquee .slide h2 { |
| 75 | font-family: "Playfair Display", serif; |
| 76 | font-style: normal; |
| 77 | font-weight: 700; |
| 78 | font-size: 48px; |
| 79 | line-height: 48px; |
| 80 | text-transform: capitalize; |
| 81 | color: #ffffff; |
| 82 | margin-top: 0; |
| 83 | margin-bottom: 0; |
| 84 | padding-bottom: 0; |
| 85 | padding-top: 0; |
| 86 | } |
| 87 | |
| 88 | .marquee .slide h2 img { |
| 89 | vertical-align: bottom; |
| 90 | margin-right: 40px; |
| 91 | } |
| 92 | </style> |