Content Slides Widget for Blogger Blog

  1. Navigate to the Theme section in your Blogger dashboard, click on "Customize," then select "Edit HTML." Paste the following code just after the <head> tag and save the template. If you have already done this step for any of other widget on your site then skip it. You only need to do this once for all widgets.

<link href="https://cdn.jsdelivr.net/gh/Mushahid7734/ClasswithMason.com/classwithmason1.1.min.css" rel="stylesheet"  crossorigin="anonymous"/>
Step 2: Paste following html code where you want this widget to appear. Of course the content of your selection etc.

<div class="lesson-slider" id="lessonSlider">
  <div class="lesson-slides">
    <div class="lesson-slide current">
      <h2>Slide 1: Prospero's Goal and the Start of the Play</h2>
      <p>
        Prospero's wish to return to Italy and reclaim his position as Duke of Milan drives the plot of The Tempest. However, we only learn about Prospero’s past in the second scene. The play begins with immediate action, placing the audience in the middle of a storm on a ship. By starting in chaos, Shakespeare uses the literary technique “<em>in medias res</em>,” engaging the audience immediately. We meet Prospero in the second scene, discovering he created the storm to shipwreck his enemies on the island, which sets the plot in motion.
      </p>
      <ul>
        <li><em>Goal:</em> Reclaim his position as Duke of Milan</li>
        <li><em>Technique:</em> In medias res</li>
        <li><em>Action:</em> Creates a storm to shipwreck enemies</li>
      </ul>
    </div>
    
    <div class="lesson-slide">
      <h2>Slide 2: Prospero's Backstory and Motivation</h2>
      <p>
        In the second scene, we learn that Prospero was the Duke of Milan until his brother Antonio, with Alonso, King of Naples, conspired to overthrow him. With Gonzalo's help, Prospero escaped and has lived on the island for twelve years with his daughter Miranda and slave Caliban. Prospero reveals this to Miranda in Act I, Scene 2. To reclaim his position, Prospero must resolve the conflict with Antonio, a theme that drives the play towards separation and reunion.
      </p>
      <ul>
        <li><em>Backstory:</em> Overthrown by brother Antonio</li>
        <li><em>Allies:</em> Escaped with Gonzalo's help</li>
        <li><em>Time on Island:</em> Twelve years</li>
        <li><em>Motivation:</em> Resolve conflict with Antonio</li>
      </ul>
    </div>
    
    <div class="lesson-slide">
      <h2>Slide 3: The Aftermath of the Shipwreck</h2>
      <p>
        The storm separates the ship’s crew into three groups: Ferdinand is alone and meets Prospero and Miranda; Alonso, Sebastian, Antonio, and Gonzalo are on another part of the island; Trinculo and Stephano end up elsewhere. This separation mirrors Prospero's isolation. The crew, like Prospero, is cut off from their loved ones, believing they have perished. Prospero, using his spirits, further disorients his enemies. His intentions become clearer as he guides them towards his camp for a reunion and resolution.
      </p>
      <ul>
        <li><em>Groups Separated:</em> Ferdinand, Alonso's group, Trinculo and Stephano</li>
        <li><em>Mirrors:</em> Prospero's own isolation</li>
        <li><em>Disorientation:</em> Prospero uses spirits</li>
        <li><em>Goal:</em> Guide towards reunion and resolution</li>
      </ul>
    </div>
    
    <div class="lesson-slide">
      <h2>Slide 4: Prospero’s Confrontation and Resolution</h2>
      <p>
        The play’s climax occurs when Prospero confronts Alonso and Antonio. He accuses them of their past betrayal and manipulates their emotions by claiming to have lost his daughter in the storm. Alonso, mourning his son Ferdinand, forms an emotional bond with Prospero. After Alonso restores Prospero’s dukedom, Prospero reveals Ferdinand alive, bringing joy. The play concludes with reconciliation and serenity. Through the experience of separation and reunion, Prospero resolves the conflict and secures his return home, bringing the narrative full circle.
      </p>
      <ul>
        <li><em>Confrontation:</em> Accuses Alonso and Antonio of betrayal</li>
        <li><em>Emotional Manipulation:</em> Claims loss of daughter</li>
        <li><em>Restoration:</em> Alonso restores Prospero’s dukedom</li>
        <li><em>Revelation:</em> Ferdinand is alive</li>
        <li><em>Conclusion:</em> Reconciliation and serenity</li>
      </ul>
    </div>
  </div>

  <button id="fullscreenButton" class="fullscreen-button" onclick="Fullscreen()">&#x2610;</button>
  <button id="closeButton" class="close-button" onclick="Fullscreen()">&times;</button>

  <div class="slide-navigation">
    <button class="prev" onclick="changeSlide(-1)">&#8249;</button>
    <button class="next" onclick="changeSlide(1)">&#8250;</button>
  </div>
</div>
Place following javascript below the html code


<script>
  let slideIndex = 0;
  showSlide(slideIndex);

  function changeSlide(n) {
    showSlide(slideIndex += n);
  }

  function showSlide(n) {
    let slides = document.getElementsByClassName("lesson-slide");
    if (n >= slides.length) {
      slideIndex = 0;
    }
    if (n < 0) {
      slideIndex = slides.length - 1;
    }
    
    for (let i = 0; i < slides.length; i++) {
      slides[i].classList.remove('current');
    }
    
    slides[slideIndex].classList.add('current');
  }

  function Fullscreen() {
    let slider = document.getElementById("lessonSlider");
    let fullscreenButton = document.getElementById("fullscreenButton");
    let closeButton = document.getElementById("closeButton");

    if (!document.fullscreenElement) {
      if (slider.requestFullscreen) {
        slider.requestFullscreen();
      } else if (slider.mozRequestFullScreen) { // Firefox
        slider.mozRequestFullScreen();
      } else if (slider.webkitRequestFullscreen) { // Chrome, Safari and Opera
        slider.webkitRequestFullscreen();
      } else if (slider.msRequestFullscreen) { // IE/Edge
        slider.msRequestFullscreen();
      }
      fullscreenButton.style.display = "none";
      closeButton.style.display = "block";
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
      }
      fullscreenButton.style.display = "block";
      closeButton.style.display = "none";
    }
  }

  document.addEventListener("fullscreenchange", () => {
    let fullscreenButton = document.getElementById("fullscreenButton");
    let closeButton = document.getElementById("closeButton");
    let slider = document.getElementById("lessonSlider");
    if (document.fullscreenElement) {
      fullscreenButton.style.display = "none";
      closeButton.style.display = "block";
      slider.classList.add("fullscreen");
    } else {
      fullscreenButton.style.display = "block";
      closeButton.style.display = "none";
      slider.classList.remove("fullscreen");
    }
  });
</script>

Below is a demo

Slide 1: Prospero's Goal and the Start of the Play

Prospero's wish to return to Italy and reclaim his position as Duke of Milan drives the plot of The Tempest. However, we only learn about Prospero’s past in the second scene. The play begins with immediate action, placing the audience in the middle of a storm on a ship. By starting in chaos, Shakespeare uses the literary technique “in medias res,” engaging the audience immediately. We meet Prospero in the second scene, discovering he created the storm to shipwreck his enemies on the island, which sets the plot in motion.

  • Goal: Reclaim his position as Duke of Milan
  • Technique: In medias res
  • Action: Creates a storm to shipwreck enemies

Slide 2: Prospero's Backstory and Motivation

In the second scene, we learn that Prospero was the Duke of Milan until his brother Antonio, with Alonso, King of Naples, conspired to overthrow him. With Gonzalo's help, Prospero escaped and has lived on the island for twelve years with his daughter Miranda and slave Caliban. Prospero reveals this to Miranda in Act I, Scene 2. To reclaim his position, Prospero must resolve the conflict with Antonio, a theme that drives the play towards separation and reunion.

  • Backstory: Overthrown by brother Antonio
  • Allies: Escaped with Gonzalo's help
  • Time on Island: Twelve years
  • Motivation: Resolve conflict with Antonio

Slide 3: The Aftermath of the Shipwreck

The storm separates the ship’s crew into three groups: Ferdinand is alone and meets Prospero and Miranda; Alonso, Sebastian, Antonio, and Gonzalo are on another part of the island; Trinculo and Stephano end up elsewhere. This separation mirrors Prospero's isolation. The crew, like Prospero, is cut off from their loved ones, believing they have perished. Prospero, using his spirits, further disorients his enemies. His intentions become clearer as he guides them towards his camp for a reunion and resolution.

  • Groups Separated: Ferdinand, Alonso's group, Trinculo and Stephano
  • Mirrors: Prospero's own isolation
  • Disorientation: Prospero uses spirits
  • Goal: Guide towards reunion and resolution

Slide 4: Prospero’s Confrontation and Resolution

The play’s climax occurs when Prospero confronts Alonso and Antonio. He accuses them of their past betrayal and manipulates their emotions by claiming to have lost his daughter in the storm. Alonso, mourning his son Ferdinand, forms an emotional bond with Prospero. After Alonso restores Prospero’s dukedom, Prospero reveals Ferdinand alive, bringing joy. The play concludes with reconciliation and serenity. Through the experience of separation and reunion, Prospero resolves the conflict and secures his return home, bringing the narrative full circle.

  • Confrontation: Accuses Alonso and Antonio of betrayal
  • Emotional Manipulation: Claims loss of daughter
  • Restoration: Alonso restores Prospero’s dukedom
  • Revelation: Ferdinand is alive
  • Conclusion: Reconciliation and serenity

Join the conversation

Join the conversation