0

I'm trying to user tiny-slider in my blazor server application, but it's not functioning properly.

Problem encountered:

  • I have to reload the page for the slider to work.
  • The slider causes a layout shift (CLS)
  • I sometimes get this error in the console when I load the page:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at t (tiny-slider.js:973:8)
    at t (tiny-slider.js:977:21)
    at t (tiny-slider.js:977:21)
    at fn (tiny-slider.js:982:12)
    at Nn (tiny-slider.js:1723:16)
    at tiny-slider.js:1646:21

My code

I've include the following in my _Layout.cshtml

<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css" />
   @*other styles*@
</head>
<body>
  @RenderBody()
  <script src="_framework/blazor.server.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
  <script src="js/slider.js"></script>
</body>

The slider.js script

window.sliderFunctions = {
    candidateSpeaks : function() {
        let slider = tns({
            container: '.candidate-speaks',
            items: 1,
            slideBy: 'page',
            loop: true,
            autoplay: true,
            autoplayButtonOutput: false,
            autoplayHoverPause: true,
            arrowKeys: true,
            controls: false,
            speed: 1000,
            responsive: {
                600: { items: 2, gutter: 15, mouseDrag: true},
                800: { items: 3, gutter: 35}
            }
        });
    }
};

My razor page

@page "/candidates/{CandidateId}"

@inject IMediator Mediator
@inject IJSRuntime JS

@if(candidateProfileVM.Manifesto.Any())
{
    <hr size="6" width="100%" color="SlateGray" class="my-5"/>
    <div class="container">
      <h3 style="text-align: center;">Candidate Speaks</h3>
      <div class="candidate-speaks">
          @foreach(var quote in candidateProfileVM.Manifesto)
          {
             <article>
               <h5><span class="oi oi-double-quote-sans-left"></span></h5>
               <p style="text-align: justify;">@quote</p>
             </article>
          }
      </div>
    </div>
}

@code{
  public string CandidateId { get; set; } = string.Empty;

  private CandidateProfileVM? CandidateProfileVM;

  private bool hasSpeaks;

  @*OnparameterSetAsync()*@

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender && hasSpeaks)
      {
          await JS.InvokeVoidAsync("sliderFunctions.candidateSpeaks");
      }
  }
}
Bane
  • 99
  • 7
  • Javascript references go in the section of _Host.cshtml. What version of Blazor are you using? – Bennyboy1973 May 24 '23 at 01:20
  • @Bennyboy1973 I'm using .NET6.0. But according to Microsoft, this is not recommended- see [link](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#load-a-script-in-head-markup) – Bane May 24 '23 at 17:09
  • Interesting. I remember that putting ` – Bennyboy1973 May 24 '23 at 20:45

0 Answers0