удаление слайдера из шаблона в HTML, CSS

Question

Я делаю изменения в текущем шаблоне. В начале веб-страницы есть слайдер, который необходимо удалить. Есть только два изображения с ползунком. Когда пользователь перетаскивает изображение, появляется следующее изображение. И я хочу удалить этот слайдер и сделать изображение неподвижным, чтобы оно не двигалось. Я пробовал несколько вещей, таких как внесение изменений в css class и удаление класса из div, но ничего не работает. Либо изображение удаляется, либо оно начинает появляться на всей странице.

Вот код html:

        <div class="project-carousel-wrap fullheight">

            <div class="owl-carousel project-carousel fullheight">
               <!-- project-carousel-item -->
                <div class="fullheight img-bg">
   <!-- The mobile and desktop view works fine for which the lower divs are used -->

<!-- There was some if conditions that's why code is written inside php tags-->
<?php    
echo "<div class='mobile-image'>";
    echo "<img src='images/works/masonry/01p.jpg'>";     
    echo "</div>";
    echo "<div class='desktop-image'>";
    echo "<img src='images/works/masonry/01.jpg'>";
    echo "</div>";
    ?>

</div>
          <!-- project-carousel-item-->
            <div class=" fullheight img-bg">
<?php
echo "<img src='images/works/masonry/01.jpg'>";
 ?>
            </div> </div>

    </div>

Вот код CSS:

/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 1;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* 
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;

  /* fix for flashing background */
 /* -webkit-transform: translate3d(0px, 0px, 0px); */
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
 /* cursor: pointer;
  cursor: hand;*/
  display: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel .owl-refresh .owl-item {
  display: none;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
 /*
  -webkit-transform-style: preserve-3d;
  */
}
.owl-carousel.owl-text-select-on .owl-item {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
/*
.owl-carousel .owl-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
*/
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/* 
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
}

/* 
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transition: scale 100ms ease;
  -moz-transition: scale 100ms ease;
  -ms-transition: scale 100ms ease;
  -o-transition: scale 100ms ease;
  transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  -webkit-transition: scale(1.3, 1.3);
  -moz-transition: scale(1.3, 1.3);
  -ms-transition: scale(1.3, 1.3);
  -o-transition: scale(1.3, 1.3);
  transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  -webkit-transition: opacity 400ms ease;
  -moz-transition: opacity 400ms ease;
  -ms-transition: opacity 400ms ease;
  -o-transition: opacity 400ms ease;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
}

Я застрял в этом выпуске довольно долго. Поскольку это готовый шаблон, поэтому я не могу найти, где проблема, и именно поэтому я разместил весь код css. Любые предложения, модификации или решения будут высоко оценены. Я буду рад предоставить любые другие детали, если это необходимо.

Вы можете проверить проблему здесь: Project Link

Основное изображение в начале, когда мы перетаскиваем это влево или вправо движется. Я хотел бы, чтобы это было все еще и никакого движения. Спасибо Вот главный. js код:

/*global $:false */
/*global window: false */
(function() {
    "use strict";
    $(function($) {

        //Detecting viewpot dimension
        var vH = $(window).height();
        var vW = $(window).width();
        //Adjusting Intro Components Spacing based on detected screen resolution
        $('.fullwidth').css('width', vW);
        $('.fullheight').css('height', vH);
        $('.halfwidth').css('width', vW / 2);
        $('.halfheight').css('height', vH / 2);
        $('.90percheight').css('height', vH-vH/10);
        $('.ms-section img').css('max-width', vW / 2);
        //$('.slant-bg-wrap, .slant-layer:first-child:before').css('max-width', vW);

        //Equal Heights Trigger
        $('.equal-height-childs').equalHeights();

        //PRELOADER
        $('body, html').addClass('preloader-running');
        $('#mastwrap').css('visibility', 'hidden');
        $(window).load(function() {
            $("#status").fadeOut();
            $("#preloader").delay(1000).fadeOut(1000);
            $('body, html').removeClass('preloader-running');
            $('body, html').addClass('preloader-done');
            $("#mastwrap").delay(1000).css('visibility',
                'visible');
        });

        //Common UX/UI
        if ( $( "#works-container" ).length ) {
            $( ".works-filter-wrap" ).fadeIn(3000);
        }
        if ( $('.studio-approach-item').length ) {
            $('.studio-approach-item').on('click', function(){
                $('.studio-approach-item-details').slideUp();
                $('.studio-approach-item').removeClass('active-item');
                $(this).addClass('active-item');
                $(this).find('.studio-approach-item-details').slideDown();
            });
        }


        //Main Menu Trigger

        $('.menu-icon-wrapper, .mobile-menu-icon-open').on('click', function(){
            $('.mobile-menu-icon-open').hide();
            $('.mobile-menu-icon-close').show();
            $('header.masthead').toggleClass('no-bgcolor');
            $('nav ul > li').find('.sub-menu').stop().hide();
            $('.menu-panel').removeClass('halfview');
            $('.sub-menu').removeClass('halfview');
            $('.mastnav').fadeToggle(500);
            $('.mastnav').toggleClass('mastnav-bordered');
        });
        $('.mobile-menu-icon-close').on('click', function(){
            $(this).hide();
            $('.mobile-menu-icon-open').show();
            $('header.masthead').toggleClass('no-bgcolor');
            $('nav ul > li').find('.sub-menu').stop().hide();
            $('.menu-panel').removeClass('halfview');
            $('.sub-menu').removeClass('halfview');
            $('.mastnav').fadeToggle(500);
            $('.mastnav').toggleClass('mastnav-bordered');
        });



        //Sub Menu Trigger
        $('nav ul > li').on('click', function(){
            $('nav ul > li').find('.sub-menu').stop().hide();
            $('.menu-panel').addClass('halfview');
            $('.sub-menu').addClass('halfview');
            $(this).find('.sub-menu').stop().fadeIn(1000);
        });


        //CAROUSELS
        $(".agency-carousel, .horizontal-carousel").owlCarousel({
            autoWidth: false,
            items: 2,
            loop: true,
            nav: false,
            dots: true,
            navText: false,
            addClassActive: true,
            smartSpeed: 1000,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:2
                }
            },
            onInitialize:beforeOwlSlide,
            onInitialized:afterOwlSlide,
            onTranslate: beforeOwlSlide,
            onTranslated: afterOwlSlide
        });
        function beforeOwlSlide(){
                    if ( $( ".boxed-caption-anim" ).length ) {
                        $('.boxed-caption-anim').hide();
                        $('.active .boxed-caption-anim').removeClass('anim-slide');
                    }
        }
        function afterOwlSlide(){
                    if ( $( ".boxed-caption-anim" ).length ) {
                    $('.active .boxed-caption-anim').show().addClass('anim-slide');
                    }
        }

        $(".project-carousel").owlCarousel({
            autoWidth: false,
            autoHeight: false,
            items: 1,
            loop: true,
            nav: false,
            dots: true,
            navText: false,
            addClassActive: true,
            smartSpeed: 1000,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
            }
        });

        $(".clients-carousel").owlCarousel({
            autoWidth: false,
            items: 4,
            loop: true,
            nav: false,
            dots: true,
            navText: false,
            addClassActive: true,
            smartSpeed: 1000,
            autoHeight: false,
            responsive:{
                0:{
                    items:2
                },
                600:{
                    items:3
                },
                1000:{
                    items:4
                }
            }
        });


        $(".testimonial-carousel").owlCarousel({
            autoWidth: false,
            items: 2,
            loop: true,
            nav: false,
            dots: true,
            navText: false,
            addClassActive: true,
            smartSpeed: 1000,
            autoHeight: false,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:2
                }
            }
        });

        $(".team-carousel").owlCarousel({
            autoWidth: false,
            items: 3,
            loop: true,
            nav: false,
            dots: true,
            navText: false,
            addClassActive: true,
            smartSpeed: 1000,
            autoHeight: false,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:3
                }
            }
        });

        //ISOTOPE
                //ISOTOPE GLOBALS
                var $container1 = $('.works-container');


                //ISOTOPE INIT
                $(window).load(function() {

                   //checking if all images are loaded
                    $container1.imagesLoaded( function() {

                        //init isotope once all images are loaded
                        $container1.isotope({
                            // options
                            itemSelector: '.masonry-item',
                            layoutMode: 'masonry',
                            transitionDuration: '0.8s'
                        });


                        //forcing a perfect masonry layout after initial load
                        setTimeout(function() {
                        $container1.isotope('layout');
                        }, 100);


                        // triggering filtering
                        $('.works-filter li a').on('click', function() {
                            $('.works-filter li a').removeClass('active');
                            $(this).addClass('active');

                            var selector = $(this).attr('data-filter');
                            $('.works-container').isotope({
                                filter: selector
                            });
                            setTimeout(function() {
                                $container1.isotope('layout');
                            }, 700);
                            return false;
                        });


                        //Isotope ReLayout on Window Resize event.
                        $(window).on('resize', function() {
                            $container1.isotope('layout');
                        });

                        //Isotope ReLayout on device orientation changes
                        window.addEventListener("orientationchange", function() {
                            $container1.isotope('layout');
                        }, false);

                    });

                });

        //Hover Effects
        $('.masonry-item a').on('mouseenter', function() {
                $(this).find('.boxed-caption').slideDown();
         });
        $('.masonry-item a').on('mouseleave', function() {
                $(this).find('.boxed-caption').slideUp();
         });

        //VENOBOX

        $('.venobox').venobox({
            numeratio: true
        });

        //BX SLIDER
        $(document).ready(function(){
          $('.bxslider').bxSlider({
            adaptiveHeight:true
          });
        });


        //MULTI SCROLL

        if ( $( "#multiscroll" ).length ) {

            $('#multiscroll').multiscroll({
                verticalCentered : true,
                scrollingSpeed: 1500,
                easing: 'easeInSine',
                menu: false,
                sectionsColor: [],
                navigation: true,
                navigationPosition: 'right',
                navigationColor: '#000',
                navigationTooltips: [],
                loopBottom: true,
                loopTop: true,
                css3: false,
                paddingTop: 0,
                paddingBottom: 0,
                normalScrollElements: null,
                keyboardScrolling: true,
                touchSensitivity: 5,

                // Custom selectors
                sectionSelector: '.ms-section',
                leftSelector: '.ms-left',
                rightSelector: '.ms-right',

                //events
                onLeave: function(index, nextIndex, direction){
                    if ( $( ".boxed-caption-anim" ).length ) {
                        $('.boxed-caption-anim').hide().removeClass('anim-slide');
                    }
                },
                afterLoad: function(anchorLink, index){
                    if ( $( ".boxed-caption-anim" ).length ) {
                    $('.boxed-caption-anim').show().addClass('anim-slide');
                    }
                },
                afterRender: function(){
                    //re init Venobox after split panel is generated
                    $('.venobox').venobox({
                        numeratio: true
                    });
                    if ( $( ".boxed-caption-anim" ).length ) {
                    $('.boxed-caption-anim').show().addClass('anim-slide');
                    }
                },
                afterResize: function(){},
            });

            $('.ms-section').find('.ms-thumbnail').on('mouseenter', function(){
                $(this).parent().find('.ms-caption').slideDown(1000);
                $(this).addClass('border-wrapped');
            });
            $('.ms-section').on('mouseleave', function(){
                $(this).find('.ms-caption').slideUp(1000);
            });

        }


        //RESPONSIVE VIDEO EMBED
        $(document).ready(function(){
            // Target your .container, .wrapper, .post, etc.
            $(".project-video").fitVids();
        });



        //PARALLAX
        //Initialize Each Parallax Layer  
        function parallaxInit() {
            $.stellar({
                positionProperty: 'transform'
            });
        }

        if (!device.tablet() && !device.mobile()) {

            //Activating Parallax effect if non-mobile device is detected
            $(window).bind('load', function() {
                parallaxInit();
            });


        } else {

            //Dectivate Parallax effect if mobile device is detected (bg image is displayed)
            $('.parallax, .parallax-layer').addClass('no-parallax');

        }   




    });
    // $(function ($)  : ends
})();
//  JSHint wrapper $(function ($)  : ends

Answer 1

Вы работаете с плагином Owl Carousel JS. Так что проще всего было бы просто удалить JS, как уже прокомментировал @ Sfili_81. Второй более сложный способ - написать пользовательскую функцию на вашем главном. js

На вашем JS есть пять ползунков, которые инициализируются. Я хотел бы предложить, чтобы вы создали массив, в котором сохранены все элементы, которые инициализируются следующим образом:

var sliderElements = [
        $(".agency-carousel, .horizontal-carousel"),
        $(".project-carousel"),
        $(".clients-carousel"),
        $(".testimonial-carousel"),
        $(".team-carousel")
];

Затем вы можете l oop через каждый из них и вызывать функцию, когда они инициируют , Затем вы можете проверить, если вы получили более одного предмета. Если это не так, вы добавляете класс owl-carousel-pointereventsnone.

for(var i = 0; i < sliderElements.length; i++) {
        sliderElements[i].on('initialize.owl.carousel', function(event) {
                if (!(event.item.index > 1)) {
                        sliderElements[i].addClass('owl-carousel-pointereventsnone');
                }
        });
}

Последнее, что вам нужно сделать, это добавить этот класс в CSS со следующим атрибутом:

.owl-carousel-pointereventsnone {
        pointer-events: none !important;
}

Это должно помешать пользователю скользить изображения, если есть только одно.

Если вы уверены, что будет только одно изображение, вы также можете настроить параметр items в функции .owlCarousel () на 1.