Making 95% of your content slide from one side to the other

First of all, this is going to be a module for a website eventually – it’s going to be a part of a bigger website. Not a single page itself!

The link is here

It should work this way:

  1. when clicked the left arrow: slowly move the entire content from left to right, and replace content of the former div
  2. when clicked the right arrow: slowly move the entire content from right to left, and replace content of the former div

If you are still confused, here is a simple JS library that exactly works as I need to though it messes my design, and I can’t use it http://kenwheeler.github.io/slick/

Anything that is inside this div will be dynamically changed

<div class="news-body">
    ************
</div>

Right now, when an arrow is clicked, it only moves a particular box in the middle, which isn’t a big deal to fix, but what’s the best way to dynamically change the entire content of my div without doing something like this:

When an arrow clicked change the entire HTML body to
https://pastebin.com/UfbvGTgz

You can use the Carousel feature of Bootstrap for this.

You can even modify the CSS so instead of sliding, it will fade out from one to the next.

Alright. I really didn’t intend to re-write my code, but I could give it a try. It may eventually be simpler than I think. Thanks for the tip.