You need to make a slider with a height equal to the width of the screen. I make up joomla, tried a bunch of sliders for joomla, none of them came up. I am satisfied with the standard slider bootstrap 2, I decided to add it to the page. In order to change the height of the slider there is a script on jQuery:

<script type="text/javascript"> $( function () { $('.carousel').carousel({interval: 4000, pause: 'none'}); setInterval( function () { var window_height = $(window).height(); $('#myCarousel').height(window_height); }, 250 ); } ); </script>

The code does not work without the bootstrap.min.js library. When you connect this library, the code works, but the menu in Joomla starts to work poorly, so the question is how to do the same without jQuery in Javascript?

    3 answers 3

    Width / height of the visible part of the window

    The clientWidth / clientHeight properties for the document.documentElement element are just the width / height of the visible window area.

     var window_height = document.documentElement.clientHeight;

      Something like this:

       function carouselFunc() { //$('.carousel').carousel({interval: 4000, pause: 'none'}); var carousel = document.getElementsByClassName("carousel"); carousel.carousel({interval: 4000, pause: 'none'}); setInterval( function () { //$('#myCarousel').height(window_height); var myCarousel = document.getElementById("myCarousel"); myCarousel.height = window.innerWidth;// вся ширина окна браузера }, 250 ); }

      You can read about the height of the browser window here.

        The author you have in the title of the question one question, and the body ends with another, correct.

        • Answer 1: for this, a bunch of reference books with examples.

        • Answer 2: you connect the full standard delivery of bootstrap, go to their website in the customization section, throw out all unnecessary, for example, leave only the carousel for yourself and connect, in theory will not overlap other scripts.