We Keep Coding

auto width any element using input tag

I'm making an iframe size generator where if they type a number from the input tag with the minimum width of 300px to 600px only. If a user types a number, it should be change syncronize with the iframe's width size
here's my HTML code
<div class="ecp">
<div class="e">
<div class="pi-b1">
<div class="pi-b2">
<div class="pi-b3">
<div class="pi-b4 iframe">
<iframe src="https://rarefrostbites.pages.dev/store/com.rarefrostbites.8.1st_century.html" id="iframe" title="1st Century - RareFrostbites Team | RFB Store" loading="lazy" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div class="pi-b1">
<div class="pi-b2">
<div class="pi-b3">
<div class="pi-b4 controller">
<div class="opt">
<div class="width">
<h4>width</h4>
<input type="number" name="width" value="320" min="300" max="600" id="e_width">
</div>
<div class="height">
<h4>height</h4>
<input type="number" name="height" value="400" min="400" max="800" id="e_height">
</div>
</div>
<div class="btn">
<button>
<img src="https://rarefrostbites.pages.dev/media/store/assets/icons/gray/Close.svg" class="f" alt="Icon image">
<img src="https://rarefrostbites.pages.dev/media/store/assets/icons/white/Close.svg" class="hidden" alt="Icon image">
</button>
<button>
<img src="https://rarefrostbites.pages.dev/media/store/assets/icons/gray/Share.svg" class="f" alt="Icon image">
<img src="https://rarefrostbites.pages.dev/media/store/assets/icons/white/Share.svg" class="hidden" alt="Icon image">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the iframe is what I want to change the size based on the input tag and the .opt is where user controls it

Add new tag if another tag has certain text using jQuery or ASP.NET MVC

I use ASP.NET Core based CMS for my website.
What I need is to add new div tag with class button_two if tag h1 item_title has this text "Peow, Wow.".
How can I do it using ASP.NET code or using jQuery (using closest and append)?
Link to JSFiddle
<div class="items">
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
</div>

You can use :contains() selector , next() and `append()'
$('h1:contains("Peow, Wow")')
.next('.buttons')
.append('<div class="button_one">BUTTON ONE</div>')
.button_one {color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Any Title
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
<div class="item">
<h1 class="item_title">
Title Peow, Wow.
</h1>
<div class="buttons">
<div class="button_one">
<input type="button" value="buy" />
</div>
</div>
</div>
</div>

Proper way to manipulate innerHTML in JavaScript

I learned JavaScript very recently and not really familiar with it.
I've managed to make this wacky website.
I want those buttons on the left to change the contents of the panel that is adjacent to it.
document.getElementsByClassName('left-panel')[0].innerHTML = `INSERT HTML HERE`;
This is what I used to change the contents of the left-panel.
I wasn't really sure what to do so I just copied the HTML code that I wanted to go in there and put it in the innerHTML.
This seems really messy to me, I don't think putting HTML code in JavaScript is the best way to this but then again I don't really know.
Is there anyway to do this in a better way?
Thank you.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bruh</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<p>Hello</p><br>
</div>
<div class="main-panel">
<p>bro</p><br>
</div>
<div class="buttons">
<div class="button">
<div class="chat-button">
<img onclick="show();" id="chat-button" src="chat-dots.svg">
</div>
<div class="attendants-button">
<img onclick="show2();" id="attendants-button" src="suit-club-fill.svg">
</div>
<div class="tools-button">
<img onclick="show3();" id="tools-button" src="nut.svg">
</div>
</div>
</div>
<div class="screen">
<video id="screen" src="a.mp4">
</div>
<div class="left-panel">
<div class="tools">
<div class="microphone">
<img id="mic" src="mic-fill.svg">
<!-- -->
<p id="mic-status"> on_off </p><br>
<label class="switch">
‍‍‍‍‍‍‍‍ <input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
<p>
volume
</p>
</div>
<div class="webcam">
<img id="webcam" src="camera.svg">
<!-- -->
<label class="switch">
‍‍‍‍‍‍‍‍ <input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<video src="a.mp4" id="webcam-video">
</div>
<div class="options">
<img id="raise-hand-ico" src="hand-index.svg"><br>
<img id="like" src="hand-thumbs-up-fill.svg"><br>
<img id="dislike" src="hand-thumbs-down-fill.svg">
</div>
<div class="record">
<div class="buttons-and-stuff">
<h6 id="button-and-stuff">Record</h6><br>
<h6 id="button-and-stuff">Exit</h6>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript:
function show(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="chat-box">
<div class="chat-history">
<!-- -->
<div class="my-messages">
<div class="message-mine" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
<!-- -->
<div class="messages">
<!-- -->
<div class="message" id="message1">
<span class="sender">
me:
</span><br>
<span class="content">
testing...
</span>
</div>
</div>
</div>
<div class="chat-sending-area">
<div class="send-button">
<img class="send-message-button" src="chat-dots.svg">
</div>
<div class="text-box">
<textarea class="text-area">Write your message here...</textarea>
</div>
</div>
</div>`;
}
function show2(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="attendants">
<div class="Hosts">
<p class="head">Hosts</p><br>
<div class="all-the-hosts">
<p class="member"> name1 </p><br>
</div>
</div>
<div class="Presenters">
<p class="head">Presenters</p><br>
<div class="all-the-presenters">
<p class="member"> name2 </p><br>
</div>
</div>
<div class="Attendants">
<p class="head">Attendants</p><br>
<div class="all-the-attendants">
<p class="member"> name3 </p><br>
</div>
</div>
</div>`;
}
function show3(){
document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="tools">
<div class="microphone">
<img id="mic" src="mic-fill.svg">
<!-- -->
<p id="mic-status"> on_off </p><br>
<label class="switch">
‍‍‍‍‍‍‍‍ <input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
<p>
volume
</p>
</div>
<div class="webcam">
<img id="webcam" src="camera.svg">
<!-- -->
<label class="switch">
‍‍‍‍‍‍‍‍ <input type="checkbox">
<span class="slider round"></span>
</label>
<!-- -->
<video src="a.mp4" id="webcam-video">
</div>
<div class="options">
<img id="raise-hand-ico" src="hand-index.svg"><br>
<img id="like" src="hand-thumbs-up-fill.svg"><br>
<img id="dislike" src="hand-thumbs-down-fill.svg">
</div>
<div class="record">
<div class="buttons-and-stuff">
<h6 id="button-and-stuff">Record</h6><br>
<h6 id="button-and-stuff">Exit</h6>
</div>
</div>
</div>`;
}
Update:
Thanks for the responses. I think using a loop to append elements would make this a bit harder, but then again I don't really know what that would look like, I just wanted to know if this is something that is commonly used, even though its not the best way to do it, or its an unholy abomination, in which case I would have to fix it.
I appreciate all the help. :)

You can create elements dynamically and then append it on parent element inside a function by passing custom parameter.
Example:
const createSomeElement=(someSelectedDiv,someParameter,fetchData)=>{
someSelectedDiv.innerHTML=`
<label><b>Search</b></label>
<div class="control has-icons-left has-icons-right">
<input class="input is-small clearInput" placeholder="Search">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</div>
<div class="dropdown">
<div class="dropdown-menu">
<div class="dropdown-content results"></div>
</div>
</div>
`;
const input=document.querySelector('input');
const dropdown=document.querySelector('.dropdown')
const resultsWrapper=document.querySelector('.results')
const onInput=async (event)=>{
const items= await fetchData(event.target.value)
for(let item of items){
// dynamically create element
const option=document.createElement('a')
option.classList.add('dropdown-item');
// change html of element.
option.innerHTML=`<span>dropdown item ${item.name}</span>`;
// add some event listener.
option.addEventListener('click',()=>{
dropdown.classList.remove('is-active');
})
// append child to parent div.
resultsWrapper.appendChild(option)
}
}

Using checkbox to swap the position of content inside div element

Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.
This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?
function swap_content(conta,contb)
{
var tmp = document.getElementById(conta).value;
document.getElementById(conta).value = document.getElementById(contb).value;
document.getElementById(contb).value = tmp;
var tdp = document.getElementById(text_id1).value;
document.getElementById(text_id1).value = document.getElementById(text_id2).value;
document.getElementById(text_id2).value = tdp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>

If you simply want to invert the position of the two elements you can simply use flex reverse.
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes.
This will be much faster to process than rebuilding the dom.
$(function() {
cbToggleFields();
});
$('#example1').off('change').on('change', function() {
cbToggleFields();
});
function cbToggleFields() {
if ($('#example1').is(':checked')) {
$('#rowA').addClass('reverse');
} else {
$('#rowA').removeClass('reverse');
}
}
#rowA{
display:flex;
flex-direction:row;
justify-content:left;
/*For vertical alignment*/
/*flex-direction:column;*/
}
#rowA.reverse{
flex-direction:row-reverse;
/*flex-direction:column-reverse;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="rowA" class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content A</span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span><br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>

I recommend using the .click jquery Event Listener to as I have done below. Then I used .html() to get the contents of the div and to swap the contents.
$('#example1').click(function() {
var conta = $('#conta').html();
var contb = $('#contb').html();
$('#conta').html(contb);
$('#contb').html(conta);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
</body>

Using pure javascript here, use value to get the value of the input and swap the content around.
You can even make the function work with different types by adding another paramter to the swap_content function. function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
You can use the same function to swap different elements around.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
function swap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML
swap_content('inp1', 'inp2'); // swap items using value for input
}
<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div>
<div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>
<input type="text" id="inp1" value="Will be placed second" />
<input type="text" id="inp2" value="Will be placed first" />
<button onclick="swap_items();">Swap content</button>

As you are using bootstrap, why not take advantage of the column ordering feature ?
This way it is only a matter of changing class names.
This assume you are using both on the same row (as in your example).
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');

How to make slides change automatically on slideshow

I have added a Jquery slider (called SudoSlider) to my website, with 'previous' and 'next' buttons that allow users to advance to the next slide, or go back one. I would, however, like to make it so that the slides change automatically.
I have come across questions that are similar to this, but my Javascript is rather limited and so I'm unable to use the codes given to other users.
If anybody can help me achieve this I would be very grateful.
Please see this JSFiddle here for the codes used.
Also, the slider can be seen in action here if the JSFiddle is of no use.
Thanks very much in advance!

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/VN7F8/1/
I just changed the sequence of loading javascript. Below is the complete HTML with javascript included & include external css u have.
HTML Changes:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
</head>
<body>
<div id="container">
<div style="position:relative;">
<div id="slider">
<ul>
<li>
<div style="margin:0 auto;text-align:center;height:300px;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
</div>
</li>
<li>
<div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">
<div class="product_row_1">
<div class="one">
Sennheiser SKP 300 G3
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£296.00</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
Fostex PM8.4.1
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£412.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
Delkin Wingman
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£179.19</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
<div class="product_row_2">
<div class="one">
D|Focus Street Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£332.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
D|Focus Field Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£382.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
D|Focus Austin Rig Bundle
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£499.17</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
​

Try this, it sets the slider to automatically change.
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
});
here is the working link