How to add this 'carousel'

Hi smurv,

Thanks for your message.
I personally really like this script, so I decided to get it working on my Wipeout Media website: https://wipeoutmedia.com/cool-carousel

The steps I did to make this happen are:
1) Create a new block titled: Cool Carousel – JS
2) Open in a text editor and copy and paste the contents of jquery.carouFredSel-6.1.0-packed.js into the new code block
3) Place <script type="text/javascript"> before the above script and </script> after it.
4) Click Save to save the code block
5) Create a new block titled: Cool Carousel – JS & CSS
6) Open in a text editor and copy and paste a select section of the coolcarousel.html file into the new code block
7) The selected code I grabbed was:

<script type="text/javascript">
    $(function () {
        $('.carousel').each(function () {
            var $cfs = $(this);
            $cfs.carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                align: false,
                width: 275,
                height: 290,
                items: 1,
                auto: false,
                scroll: {
                    queue: 'last'
                }
            });
            $cfs.hover(

            function () {
                $cfs.trigger('next');
            },

            function () {
                $cfs.trigger('prev');
            });
        });
    });
</script>

<style type="text/css">
    html, body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    body {
        min-height: 600px;
    }
    body * {
        font-family: Arial, Geneva, SunSans-Regular, sans-serif;
        font-size: 14px;
        color: #333;
        line-height: 22px;
    }
    #wrapper {
        _BREAK_width: 830px;
        _BREAK_height: 500px;
        _BREAK_margin: -290px 0 0 -415px;
        _BREAK_position: absolute;

        overflow: hidden;
        left: 50%;
        top: 50%;
    }
    #wrapper * {
        color: #ccc;
    }
    #wrapper .carousel {
        display: block;
        float: left;
        width: 275px;
        height: 290px;
        margin: 0 1px 1px 0;
    }
    #wrapper .carousel img {
        display: block;
    }
    #wrapper .carousel div {
        background-color: black;
        width: 215px;
        height: 290px;
        padding: 0 30px;
    }
    #wrapper .carousel div h3 {
        font-size: 20px;
        line-height: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
    }
    #wrapper .carousel div p {
        height: 160px;
        margin: 0;
    }
</style>

NOTE: In order for the JavaScript and CSS code to work with WordPress pages and posts, you will notice I have typed _BREAK_ to break the CSS rules for #wrapper
8) Click Save to save the code block
NOTE: You may have to change the image sizing values to correspond to your image sizes you wish to use. For my images I increased all the heights to 290px. You can always play with these values to see what works best.
9) Select the checkbox for the Pages/Posts/Categories that you want these scripts to work with. You can also use URLs if you like.
10) Again, click Save after making changes
11) Go to your WordPress page that you want your image carousel to appear in.
12) Click the HTML editor, and paste something like this:

<div id="wrapper">

   <div class="carousel"><img src="https://wipeoutmedia.com/wp-content/uploads/2011/09/css-js-toolbox-v6-page-logo.png" alt="logo" width="245" height="230" />
      <div>
         <h3>Sbarro TwoFort100</h3>
            The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011.

      </div>
   </div>
</div>

NOTE: you can always create more boxes by adding additional:

<div class="carousel"><img src="https://wipeoutmedia.com/wp-content/uploads/2011/09/css-js-toolbox-v6-page-logo.png" alt="logo" width="245" height="230" />
    <div>
         <h3>Sbarro TwoFort100</h3>
            The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011.

    </div>
</div>

NOTE: Shown is my image, which is stored in the WordPress media uploads section. You of course would need to upload your own media and copy and paste the link for that. Take note of the image size too as you would need to consider these values.
I actually found that the width was perfect, I only had to adjust the height values.
Lastly, you would need to change the text for the title and paragraphs to whatever you wish to display.
13) Click Publish and View. Hopefully it all works!!!

Kind Regards,
Damo

Marked as solved