Banner auto slideshow

Hi i’m would like to set 2 images in an automatic slideshow for the banner of the home page. I’m not very good with programming but i’m assuming it would look something like that. Also depending of the image I would like the text description to change to match the corresponding image. Here is the code. I know that the code is messed up between my php and js. Can someone help me with this,

Thank you.

<?php
/**
* Frontpage Banner, Slider
*
* @package kale
*/
?>
<!– Frontpage Banner / Slider –>

<?php
$kale_frontpage_banner = kale_get_option(‘kale_frontpage_banner’);
$kale_example_content = kale_get_option(‘kale_example_content’);
$kale_frontpage_banner_link_images = kale_get_option(‘kale_frontpage_banner_link_images’);
?>

<?php

$force_banner = false;

/*** Posts Slider ***/

if ($kale_frontpage_banner == ‘Posts’) {
$kale_frontpage_posts_slider_category = kale_get_option(‘kale_frontpage_posts_slider_category’);
$kale_frontpage_posts_slider_number = kale_get_option(‘kale_frontpage_posts_slider_number’);
$args = array( ‘posts_per_page’ => $kale_frontpage_posts_slider_number, ‘category’ => $kale_frontpage_posts_slider_category );
$kale_posts_slider = get_posts( $args );
$n = count($kale_posts_slider);
if($n > 2) { #owl carousel limitation?
?>
<div class=”frontpage-slider frontpage-posts-slider”>
<div class=”owl-carousel”>
<?php foreach ( $kale_posts_slider as $post ) {
setup_postdata( $post );
$src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), ‘kale-slider’ ) ;
$featured_image = ”;
if($src) $featured_image = $src[0];
else if($kale_example_content == 1) $featured_image = kale_get_sample(‘slide’);
if($featured_image) { ?>
<div class=”owl-carousel-item”>

<?php if($kale_frontpage_banner_link_images == 0) { ?>
” alt=”<?php the_title_attribute(); ?>” />
<div class=”caption”>
<p class=”date”><?php echo get_the_date(); ?></p>
<h2>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></h2>
<p class=”read-more”>“><?php printf( _nx( ‘1 Comment’, ‘%1$s Comments’, get_comments_number(), ‘comments title’, ‘kale’ ), number_format_i18n( get_comments_number() ) ); ?></p>
</div>
<?php } else { ?>
“>” alt=”<?php the_title_attribute(); ?>” />
<?php } ?>
</div>
<?php }
} wp_reset_postdata(); ?>
</div>
</div>
<?php
} else { $force_banner = true; }
}

/*** Banner ***/

if($kale_frontpage_banner == ‘Banner’ || $force_banner) {
$header_image = get_header_image();
$kale_banner_heading = kale_get_option(‘kale_banner_heading’);
$kale_banner_description = kale_get_option(‘kale_banner_description’);
$kale_banner_url = kale_get_option(‘kale_banner_url’);
if($header_image != ”) {
?>
<div class=”frontpage-banner”>

<script>
var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName(“mySlides”);
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = “block”;
setTimeout(carousel, 9000);

$header_image = ‘mySlides’
if myIndex = 0
$kale_banner_description = ‘Text A’
else
$kale_banner_description = ‘Text B’
endif

<?php if($kale_frontpage_banner_link_images == 0) { ?>
” alt=”<?php echo esc_attr($kale_banner_heading); ?>” />
<div class=”caption”>
<?php if($kale_banner_url != ” && $kale_banner_heading != ”) { ?>
<h2>“><?php echo esc_html($kale_banner_heading); ?></h2>
<?php } ?>
<?php if($kale_banner_url == ” && $kale_banner_heading != ”) { ?>
<h2><?php echo esc_html($kale_banner_heading); ?></h2>
<?php } ?>
<?php if($kale_banner_description != ”) { ?>
<p class=”read-more”><?php echo esc_html($kale_banner_description); ?></p>
<?php } ?>
</div>
<?php } else { ?>
<?php if($kale_banner_url != ”) { ?>“><?php } ?>
” alt=”<?php echo esc_attr($kale_banner_heading); ?>” />
<?php if($kale_banner_url != ”) { ?><?php } ?>
<?php } ?>

</div>
}
</script>
<?php
}
}
?>

<!– /Frontpage Banner / Slider –>

The page I need help with: [log in to see the link]