My goal is that when I turn on the switch button, it will automatically slide to the right and show a red-backed Dave, and once I turn it off, it will automatically revert back to Jacqueline. Will return to the scene. And please take a look. My code is the demo I provided. Thanks

.container {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
/*     overflow: hidden;
    overflow-y: auto; */
    transition: .22s ease left;
    background: #f3faff;
}

.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    text-align: left;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 200%;
}

.left-100 {
    background: yellow;
    width: 50%;
    padding: 10px;
}

.right-100 {
    background: red;
    width: 50%;
    padding: 10px;
}


.switch {
     display: inline-block;
     position: relative;
     margin: 0 0 10px;
     font-size: 16px;
     line-height: 24px;
}
 .switch__input {
     position: absolute;
     top: 0;
     left: 0;
     width: 36px;
     height: 20px;
     opacity: 0;
     z-index: 0;
}
 .switch__label {
     display: block;
     padding: 0 0 0 44px;
     cursor: pointer;
}
 .switch__label:before {
     content: '';
     position: absolute;
     top: 5px;
     left: 0;
     width: 36px;
     height: 14px;
     background-color: rgba(0, 0, 0, .26);
     border-radius: 14px;
     z-index: 1;
     transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
 .switch__label:after {
     content: '';
     position: absolute;
     top: 2px;
     left: 0;
     width: 20px;
     height: 20px;
     background-color: #fff;
     border-radius: 14px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
     z-index: 2;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: left, background-color;
}
 .switch__input:checked + .switch__label:before {
     background-color: rgba(63, 81, 181, .5);
}
 .switch__input:checked + .switch__label:after {
     left: 16px;
     background-color: #3f51b5;
}

.switcher-c {
    background: #ffffff;
    width: 100%;
    position: fixed;
    z-index: 11;
    left: 0;
}
    
    .margin-top {
    margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switcher-c">
<div class="switch">
        <input type="checkbox" id="switch2" class="switch__input">
        <label for="switch2" class="switch__label">Switch 2</label>
</div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="left-100"><div class="margin-top">Left slide 100% Width</div></div>
    <div class="right-100"><div class="margin-top">Right Slide 100% Width</div></div>
  </div>
</div>

2

$('#switch2').on('change', function() {
  $('.wrapper').toggleClass('active');
})
.container {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transition: .22s ease left;
    background: #f3faff;
}

.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    text-align: left;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 200%;
}
.left-100, .right-100 {
  position: absolute; 
  top: 0;
  bottom: 0;
  transition: all 0.3s ease;
}

.left-100 {
  left: 0;
  right: 50%;
}

.right-100 {
  left: 50%;
  right: 100%;
}

.active .left-100 {
  left: -50%;
  right: 0;
}

.active .right-100 {
  left: 0;
  right: 50%;
}

.left-100 {
    background: yellow;
    width: 50%;
    padding: 10px;
}

.right-100 {
    background: red;
    width: 50%;
    padding: 10px;
}


.switch {
     display: inline-block;
     position: relative;
     margin: 0 0 10px;
     font-size: 16px;
     line-height: 24px;
}
 .switch__input {
     position: absolute;
     top: 0;
     left: 0;
     width: 36px;
     height: 20px;
     opacity: 0;
     z-index: 0;
}
 .switch__label {
     display: block;
     padding: 0 0 0 44px;
     cursor: pointer;
}
 .switch__label:before {
     content: '';
     position: absolute;
     top: 5px;
     left: 0;
     width: 36px;
     height: 14px;
     background-color: rgba(0, 0, 0, .26);
     border-radius: 14px;
     z-index: 1;
     transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
 .switch__label:after {
     content: '';
     position: absolute;
     top: 2px;
     left: 0;
     width: 20px;
     height: 20px;
     background-color: #fff;
     border-radius: 14px;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
     z-index: 2;
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: left, background-color;
}
 .switch__input:checked + .switch__label:before {
     background-color: rgba(63, 81, 181, .5);
}
 .switch__input:checked + .switch__label:after {
     left: 16px;
     background-color: #3f51b5;
}

.switcher-c {
    background: #ffffff;
    width: 100%;
    position: fixed;
    z-index: 11;
    left: 0;
}
    
.margin-top {
    margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switcher-c">
<div class="switch">
        <input type="checkbox" id="switch2" class="switch__input">
        <label for="switch2" class="switch__label">Switch 2</label>
</div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="left-100"><div class="margin-top">Left slide 100% Width</div></div>
    <div class="right-100"><div class="margin-top">Right Slide 100% Width</div></div>
  </div>
</div>

See it

Isn’t that the answer you’re looking for? Browse other questions with the jquery css tag or ask your own question.