Fix For "Interactive Elementor Landing Page Website Design " originally created by Jim Fahad
To make slider work: View this as three buttons that, when clicked, change the show/hide option for different containers. To make this work simply add a CSS name to the containers like item1, item2, and item3. Use item1 on all containers that need to appear when you click the first/top button. Add item2 to all containers for the middle button, and item3 or the final button. Example containers would be the individual heading and content on the left side, then the title, image, and button in the middle. Do not add classes to the buttons on the right as they will disappear.
Next copy the CSS and replace the existing custom CSS Jim Fahad provided in the main container.
Finally, replace the JavaScript in the HTML widget with the javascript provided.
Replace JavaScript code with this:
<script data-optimized="1" src="https://geekoutrealty.com/wp-content/litespeed/js/3a66d0e5895233ddf660a3450c590f2e.js?ver=90f2e"></script> <script data-optimized="1" type="text/javascript">(function($){$(document).ready(function(){$('.item1').show();$('.control-area > .elementor-element').on('click',function(){var index=$(this).index();$('.control-area > .elementor-element').removeClass('active');$(this).addClass('active');$('.item1, .item2, .item3').hide();$('.item'+(index+1)).show()})})})(jQuery)</script>
Replace custom CSS with this:
:root{
--activeC: #ffffffbf;
}
.control-area > .elementor-element.active{
background-color: var(--activeC) !important;
}
.item1 { display: block; }
.item2, .item3 { display: none; }