NamelessMC

<div class="jumbotron jumbotron-homepage">    <!-- <h1>{$SITENAME}</h1>	<p>{$PLAYERS_ONLINE}</p>	<p>{$CONNECT_WITH}</p> -->  </div>

In the next part we are going to add the content which will 'slide'.
In my case this content will be two pictures. But you can add whatever you want to slide as simple HTML.
We define an unordered-list Element which will hold our list of content. This element will have the class 'slide'.

    <div class="jumbotron jumbotron-homepage">        <!--        <h1>{$SITENAME}</h1>        <p>{$PLAYERS_ONLINE}</p>        <p>{$CONNECT_WITH}</p>-->        <ul class="slide">            <li>                <img src="core/assets/img/welcome-banner.png" alt=""></li>            <li><img src="core/assets/img/vote-banner.png" alt=""></li>        </ul>    </div>

Open the custom_css.css file or create it if you havn't done yet. We need to define some rules for our outer container (jumbotron)
Add the following to your custom_css.css file. You can modify it to your likes.

.jumbotron {    background-color: rgba(0, 0, 0, 0.5); /*Make semi-transparent background. Set the last value to 0 if you want complete transparency.*/    background-image: none !IMPORTANT;               /*Remove the background-image*/    border: none;                         /*Remove the border*/    box-shadow: none;                     /*Remove the box-shadow*/    padding: 0px;                         /*Remove the padding*/    border-radius: 0px;                   /*Remove the border-radius*/    margin-bottom: 20px !IMPORTANT;       /*Create a margin at the bottom*/}

Now that we created some css we want to add it to our site, so that we can see it.
Open the header.php file. And look-out for the //Global tag. Then add the following line underneath the other css files.
In addition we can add the css file for our slider which we added at the beginning.
It should look like this.

// Global    echo '<link href="' . PATH . 'core/assets/css/toastr.css" rel="stylesheet">' . PHP_EOL;    echo '<link href="' . PATH . 'core/assets/css/custom_core.css" rel="stylesheet">' . PHP_EOL;    echo '<link href="' . PATH . 'core/assets/css/custom_css.css" rel="stylesheet">' . PHP_EOL;    echo '<link href="' . PATH . 'core/assets/css/responsiveslides.css" rel="stylesheet">' . PHP_EOL;    echo '<link rel="icon" href="' . PATH . 'core/assets/favicon.ico">';

Now you should see some changes when you visit your site.
To activate the slide we need to add the Javascript file which we added at the beginning.
Open the scripts.php file and add

echo '<script src="' . PATH . 'core/assets/js/responsiveslides.min.js"></script> '. PHP_EOL;

underneath the other scripts.

It should look like this.

/* *  Load scripts */echo '<script src="' . PATH . 'core/assets/js/jquery.min.js"></script>' . PHP_EOL;echo '<script src="' . PATH . 'styles/themes/' . $theme_result . '/js/bootstrap.min.js"></script>' . PHP_EOL;echo '<script src="' . PATH . 'core/assets/js/jquery.cookie.js"></script>' . PHP_EOL;echo '<script src="' . PATH . 'core/assets/js/toastr.js"></script>' . PHP_EOL;echo '<script src="' . PATH . 'core/assets/js/responsiveslides.min.js"></script> '. PHP_EOL;

We are close to the end. But there are still few things to do. We need to call the Javascript. We do this by adding a small script at the end of  the scripts.php file.

  <script>        $(function() {            $(".slide").responsiveSlides({                auto: true, // Boolean: Animate automatically, true or false                speed: 1500, // Integer: Speed of the transition, in milliseconds                timeout: 8000, // Integer: Time between slide transitions, in milliseconds                pause: true, // Boolean: Pause on hover, true or fals            });        });    </script>

If you have done everything righ, you should have a nice slider.

If you have questions or problems just ask

I hope you enjoyed this tutorial. I plan on making more if you like it and please give some feetback as this was my first tutorial ever
 

EDIT I AM SORRY FOR THE UGLY CODE SNIPPETS...THEY GET MESSED UP WHEN I SAVE THEM :/