Carousel wont work when transferring to Hubspot Page

Develop, Build & Integrate CMS Development
1

Hi all,

I am having issues with the controls of the carousel , I wonder why the code below when pasted in the rich text format disappears each time I save it. I need this to control the carousel. I am currently using this Jquery version 1.12.4. https://www.besocialscene.com/eventbrite-test?hs_preview=Fqitjvct-7583751929

 <div class="MS-controls">
 <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
 <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
 </div>

This is my head tag<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

and this is how I call the carousel
$('#mixedSlider').multislider({
interval: 0,
slideAll: false,
duration: 1500,
hoverPause: true

});
2

@chrissa0000 I’d highly recommend not putting code in rich text areas. Instead use the HTML/Code module or, even better, use a custom module.

3

@stefen , Thank you for the suggestions I already transferred the code in the the custom module, the left and right icon appears but there’s still an error , Is there a conflict with the Jquery Version?

Uncaught TypeError: $ is not a function
 at HTMLDocument.<anonymous> (hubtheme-main.min.js:1)
 at i (jquery-1.12.4.min.js:2)
 at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2)
 at Function.ready (jquery-1.12.4.min.js:2)
 at HTMLDocument.K (jquery-1.12.4.min.js:2)
4

@chrissa0000 jQuery is already included on every HubSpot site, so you should remove jQuery 1.12 from your module.